代码拉取完成,页面将自动刷新
unpkg cdn
<script src="https://unpkg.com/funlazy"></script>
jsdelivr cdn
<script src="https://cdn.jsdelivr.net/npm/funlazy"></script>
npm 安装
npm i funlazy -S
const FunLazy = require( "funlazy" );
<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">
<script>
FunLazy();
</script>
注:如果在 Vue
项目中使用,需要在 mounted
(vue2)或 onMounted
(vue3) 中调用 FunLazy
函数。
FunLazy( {
placeholder: "thumb.jpg",
effect: "fadeIn"
} );
const opt = FunLazy( {
placeholder: "thumb.jpg",
effect: "fadeIn"
} );
// 根据传入的自定义配置项
// 与默认的配置项进行合并
// 返回合并之后的配置结果
console.log( opt );
<button>添加图片</button>
<div id="img-box">
<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">
</div>
<script>
const opt = FunLazy( {
autoCheckChange: true
} );
// 设置 autoCheckChange: true
// 新增加的图片会自动进行懒加载的解析
const target = document.getElementById( "img-box" );
document.querySelector( "button" ).addEventListener( "click", () => {
target.insertAdjacentHTML( "beforeend", '<img data-funlazy="new.jpg" width="500" height="309">' );
} )
</script>
<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">
<script>
// beforeLazy 属性可用于在图片进行懒加载操作之前
// 对图片地址进行最后的处理,相当于架设了一层拦截
// 可以很简单的在加载前对图片地址进行一次批量处理
FunLazy( {
beforeLazy: src => `${ src }?img-id=${ Math.random().toString( 36 ).slice( 2, 10 ) }`
} );
</script>
<img data-funlazy="1.jpg" width="500" height="309">
<img data-funlazy="2.jpg" width="500" height="309">
<img data-funlazy="3.jpg" width="500" height="309">
<script>
// useErrorImagePlaceholder 属性可用于在图片加载失败时
// 用一张默认的图片进行占位显示
// - 设置为 true 则使用内置的灰色图进行占位
// - 传入图片地址则可以自定义占位图
FunLazy( {
useErrorImagePlaceholder: true
// 或者:
// useErrorImagePlaceholder: "img/error.jpg"
} );
</script>
参数 | 说明 | 类型 | 默认值 |
container | 目标容器的选择器,默认基于 body,若传入 window, document, "html" 则统一转换为 "body" | String | body |
effect | 图片显示效果,可选值:show, fadeIn | String | show |
placeholder | 占位图片 | String | base64 编码的灰图 |
threshold | 边界值,单位:px | Number | 0 |
width | 图片宽度,传入数字则自动设置 px 单位,也可传入百分比形式,还可通过 css 设置 | Number / String | - |
height | 图片高度,传入数字则自动设置 px 单位,也可传入百分比形式,还可通过 css 设置 | Number / String | - |
eventType | 指定加载图片的鼠标事件,可选值:click, dblclick, mouseover | String | - |
axis | 容器滚动方向,可选值:x, y | String | y |
onSuccess | 图片加载成功时执行的回调函数,回调参数有两个: 1. 图片加载成功的元素 2. 加载成功的图片地址 |
Function | 空函数 |
onError | 图片加载失败时执行的回调函数,回调参数有两个: 1. 图片加载失败的元素 2. 加载失败的图片地址 |
Function | 空函数 |
strictLazyMode (v2.1.4 新增) |
严格懒加载模式,当此属性值为 true 时,懒加载元素如果满足以下任一条件,将不进行懒加载操作: 1. 此元素本身处于隐藏状态 2. 此元素本身 opacity: 0 3. 此元素含有处于隐藏状态的祖先元素 |
Boolean | true |
beforeLazy (v2.1.0 新增) |
在进行懒加载操作前执行的函数,函数参数是图片地址(可用于在 开始加载图片之前对图片地址做最后的处理,并返回处理后的图片地址) |
Function | 空函数 |
autoCheckChange (v2.1.0 新增) |
自动检测目标元素内需要进行懒加载操作的元素的变化并自动解析 | Boolean | false |
useErrorImagePlaceholder (v2.1.1 新增) |
当图片加载失败时,使用指定的图片进行占位显示 (可使用内置灰色图或自定义图片) |
Boolean / String | false |
Chrome 80+
Edge 90+
Safari 13+
Firefox 90+
IE 不支持
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型