轻量级图片懒加载组件（原创）

所属分类：UI-加载

25356 174 查看评论 (2)

分享到微信朋友圈

查看演示 website 立即下载

插件描述：无任何依赖的轻量级图片懒加载组件

更新时间：2020-03-20 10:42:55

更新说明：程序库版本升级至 v2.1.0；不再依赖 jQuery，完全采用原生 Javascriptt 开发；不在兼容 IE8- 的浏览器；

FunLazy v1.0.0版下载（兼容ie7）

FunLazy

完全使用原生 Javascriptt 开发的图片懒加载组件，可完美支持主流的现代高级浏览器，组件会优先使用 Intersection Observer API，以此提高懒加载的性能

使用方法

引入文件

<!-- jquery 1.9.0+ -->
<script src="jquery.min.js"></script>
<script src="funlazy.min.js"></script>

添加属性

<body>
    <img data-funlazy="01.jpg" width="700" height="700">
    <img data-funlazy="02.jpg" width="700" height="700">
    <img data-funlazy="03.jpg" width="700" height="700">
    <img data-funlazy="04.jpg" width="700" height="700">
    <img data-funlazy="05.jpg" width="700" height="700">
    <img data-funlazy="06.jpg" width="700" height="700">
    <img data-funlazy="07.jpg" width="700" height="700">
    <img data-funlazy="08.jpg" width="700" height="700">
    <img data-funlazy="09.jpg" width="700" height="700">
    <img data-funlazy="10.jpg" width="700" height="700">
</body>

调用组件

$.FunLazy({
    onSuccess: function ( el, img ) {
        console.log( "图片：" + img + "已加载" );
    }
});

API 参数

参数	说明	类型	默认值
container	目标容器，默认：null 表示 window	Object / String	null
effect	图片显示效果，可选值：show, fadeIn	String	show
placeholder	占位图片	String	base64 编码的灰图
errorPlaceholder	图片加载失败时的占位图片	String	""
threshold	边界值，单位：px	Number	0
width	图片宽度，数字值时单位是 px，也可以是百分比形式，可通过 css 或行内属性设置	Number / String	null
height	图片高度，数字值时单位是 px，也可以是百分比形式，可通过 css 或行内属性设置	Number / String	null
axis	容器滚动方向，可选值：x, y	String	y
eventType	指定加载图片的鼠标事件，可选值：click, dblclick, mouseover	String	""
onSuccess	图片加载成功时执行的回调函数，回调参数有两个： 1. 图片加载成功的元素 2. 加载成功的图片地址	Function	空函数
onError	图片加载失败时执行的回调函数，回调参数有两个： 1. 图片加载失败的元素 2. 加载失败的图片地址	Function	空函数