代码拉取完成,页面将自动刷新
同步操作将从 FeCoder/FunLazy 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
这是一个完全使用原生 JavaScript 开发的图片懒加载组件,可完美支持主流的现代高级浏览器
组件会优先使用 Intersection Observer API,以此提高懒加载的性能
<script src="funlazy.min.js"></script>
<script src="https://unpkg.com/funlazy@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/funlazy@latest"></script>
npm i funlazy -S
const FunLazy = require( "funlazy" );
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>
<template>
<div>
<img v-for="img of images" :key="img" :data-funlazy="img" width="500" height="309">
</div>
</template>
<script>
export default {
data () {
return {
images: [
require( "./assets/img/1.jpg" ),
require( "./assets/img/2.jpg" ),
require( "./assets/img/3.jpg" )
]
}
},
mounted () {
FunLazy();
}
}
</script>
FunLazy({
placeholder: "thumb.jpg",
effect: "fadeIn"
});
var opt = FunLazy({
placeholder: "thumb.jpg",
effect: "fadeIn"
});
// 根据传入的自定义配置项
// 与默认的配置项进行合并
// 返回合并之后的配置结果
console.log( opt );
<button>添加图片</button>
<div>
<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>
var opt = FunLazy({
autoCheckChange: true
});
// 设置 autoCheckChange: true
// 新增加的图片会自动进行懒加载的解析
// -------------------------------
// 不过此属性不支持 IE9 - 10
// 在 IE9 - 10 中需要再次手动调用 FunLazy 函数来实现此功能
var target = document.querySelector( "div" );
document.querySelector( "button" ).addEventListener("click", function () {
target.insertAdjacentHTML( "beforeend", '<img data-funlazy="new.jpg" width="500" height="309">' );
// 支持 IE9 - 10
if ( navigator.userAgent.toLowerCase().match( /msie (9|10)\.0/ ) ) {
FunLazy( opt );
}
})
</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: function ( src ) {
return src + "?id=" + Math.random().toString( 36 ).substr( 2, 10 );
}
});
</script>
参数 | 说明 | 类型 | 默认值 |
container | 目标容器的选择器,默认基于 body | String | body |
effect | 图片显示效果,可选值:show, fadeIn( fadeIn 不支持 IE9 ) | String | show |
placeholder | 占位图片 | String | base64 编码的灰图 |
errorPlaceholder | 图片加载失败时的占位图片 | String | "" |
threshold | 边界值,单位:px | Number | 0 |
width | 图片宽度,数字值时单位是 px,也可以是百分比形式, 可通过 css 或行内属性设置 |
Number / String | "" |
height | 图片高度,数字值时单位是 px,也可以是百分比形式, 可通过 css 或行内属性设置 |
Number / String | "" |
axis | 容器滚动方向,可选值:x, y | String | y |
eventType | 指定加载图片的鼠标事件,可选值:click, dblclick, mouseover | String | "" |
onSuccess | 图片加载成功时执行的回调函数,回调参数有两个: 1. 图片加载成功的元素 2. 加载成功的图片地址 |
Function | 空函数 |
onError | 图片加载失败时执行的回调函数,回调参数有两个: 1. 图片加载失败的元素 2. 加载失败的图片地址 |
Function | 空函数 |
beforeLazy (v2.1.0 新增) |
在进行懒加载操作前执行的函数,函数参数是图片地址(可用于在 开始加载图片之前对图片地址做最后的处理,并返回处理后的图片地址) |
Function | 空函数 |
autoCheckChange (v2.1.0 新增) |
自动检测目标元素内需要进行懒加载操作的元素的变化 (例如:动态添加新元素)并自动解析(不支持 IE 9 - 10) |
Boolean | false |
Chrome | Safari | Edge | Firefox | Opera | IE |
---|---|---|---|---|---|
支持 | 支持 | 支持 | 支持 | 支持 | 9+ |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。