一.什么是懒加载?

懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会被加载。

二.懒加载有什么作用?

  1. 能提升用户的体验。如果页面上所有的图片都需要加载,等待时间会很长,这就会严重影响用户体验。
  2. 减少无效资源的加载,减轻服务器的压力和流量,减小浏览器的负担。
  3. 防止并发加载的资源过多会阻塞js的加载。

三. 实现原理

将页面上的图片的 src 属性设为空字符串,图片的真实路径则设置在data-original属性中。要用的时候就取出来,把它的值赋值给img的 src 属性。

四. 实现

1
2
3
4
5
6
7
8
9
10
11
<div class="box">
<img data-original="img/1.jpg">
<img data-original="img/2.jpg">
<img data-original="img/3.jpg">
<img data-original="img/4.jpg">
<img data-original="img/5.jpg">
<img data-original="img/6.jpg">
<img data-original="img/7.jpg">
<img data-original="img/8.jpg">
<img data-original="img/9.jpg">
</div>
1
2
3
4
5
img{
display: block;
margin-bottom: 50px;
height: 200px;// 一定要设置图片高度
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const imgs = document.getElementsByTagName('img');

function lazyLoad(imgs) {
// 视口高度;
const clientH = document.documentElement.clientHeight;
// 滚动距离
const clientT = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i < imgs.length; i++) {
// 如果视口高度+滚动距离 > 图片到浏览器顶部的距离就去加载;
// !imgs[i].src 是避免来回滚动时重复请求
if (clientH + clientT > imgs[i].offsetTop && !imgs[i].src) {
// 使用data-xx的自定义属性可以通过dom元素的dataset.xx取得;
imgs[i].src = imgs[i].dataset.original;
}
}
};

lazyLoad(imgs);
// 监听滚动,加载后面的图片;
window.onscroll = () => lazyLoad(imgs);