---

EasyLazyload

一、引入js文件

引入 EasyLazyload.js 前需要引用 jquery

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./js/EasyLazyload.min.js"></script>
1
2

二、编写HTML结构

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

<img data-lazy-src="https://img0.baidu.com/it/u=4274937781,3054748159&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.cnpp.cn%2Fupload%2Fimages%2F20200110%2F16012461750_960x640.jpg&refer=http%3A%2F%2Fimage.cnpp.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371806&t=d6cd7ddbd75cd2edf5ac12734fc5d53c" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F2012_Website_appreciate%2F2012-05-18%2F20120518005339.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371806&t=13f53802035039d26978fa12d8b5c46a" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F547d58c6ab8a9.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371882&t=5967307b0862b35616867f2629d8e2b5" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-090915%2Ft5g3wen1lght5g3wen1lgh.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371882&t=0a2dc2cb1bb3c4eeb8d00ab716fd4dd3" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F552dc2da9cba7.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371914&t=dc037aba69fc0ae512e683826266eca0" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F2016_Website_appreciate%2F2016-06-11%2F20160611220857bm0qAbm0qA.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371938&t=594f9e65ae398615b258bd346fd98c9e" />
<img data-lazy-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F012R1114254%2F21012Q14254-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665371938&t=d438646f06dc03792bed3615e5dd08bb" />
1
2
3
4
5
6
7
8

三、修改样式

这一步可有可无 ，也可以替换成自己想要的样式，我这里是为了展示方便，所以加了样式。

img {
	display: block;
	margin: 0 auto;
	margin-top: 100px;
}
1
2
3
4
5

四、初始化EasyLazyload

调用全局方法

lazyLoadInit({
	coverColor: "white",
	coverDiv: "
test
",
	offsetBottom: 0,
	offsetTopm: 0,
	showTime: 1,
	onLoadBackEnd: function (i, e) {
		console.log("onLoadBackEnd:" + i);
	},
	onLoadBackStart: function (i, e) {
		console.log("onLoadBackStart:" + i);
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13

五、属性介绍

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

六、效果如图：

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！