EasyLazyload.js 超好用js图片延迟加载

插件特效

2026-07-26 00:31 4 次浏览 • 0 次下载 1.4KB

插件描述：超简单图片延迟加载js插件

更新时间：2018/7/23 上午12:1:43

更新说明：修改不能正常访问的图片路径。

EasyLazyload.js

超级好用的js 图片延迟加载插件

使用方法

引入 EasyLazyload.js

将图片 src 替换为 data-lazy-src

1	`<img` `data-lazy-src="..."` `/>`

调用全局方法

1	`lazyLoadInit(）`

使用须知

引入 EasyLazyload.js 前需要引用 jquery && zepto
需要在开启服务下运行

参数列表

示例代码

<script>
    lazyLoadInit({
        coverColor:"white",
        coverDiv:"<h1>test</h1>",
        offsetBottom:0,
        offsetTopm:0,
        showTime:1100,
        onLoadBackEnd:function(i,e){
            console.log("onLoadBackEnd:"+i);
        }
        ,onLoadBackStart:function(i,e){
            console.log("onLoadBackStart:"+i);
        }
    });
</script>

coverColor：图片即将显示时覆盖层的颜色
coverDiv：图片即将显示时覆盖层可显示的土自定义组件
offsetBottom：图片距离屏幕底部出现时间点的距离差值（注解：延迟加载图片会在图片顶部接触屏幕底部时出现，如果想要让图片顶部距离屏幕底部有一定距离时出现，请设置此值）
offsetTopm：图片距离屏幕底部出现时间点的距离差值（注解：同上，距离顶部）
onLoadBackEnd：图片已经完全出现时的回调函数，参数为（index，event）加载的图片下标，以及dom对象（dom对象为jquerydom或zeptodom对象）
onLoadBackStart：图片已经下载完成，即将开始显示时的回调函数（参数同上）

EasyLazyload.js 优点

EasyLazyload.js 是真延迟加载而且不会对样式有任何影响。
队列式加载，不会影响页面效率。
不需要设置任何宽高，简单易用