一.什么是懒加载?
懒加载也叫延迟加载
,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会被加载。
二.懒加载有什么作用?
- 能提升用户的体验。如果页面上所有的图片都需要加载,等待时间会很长,这就会严重影响用户体验。
- 减少无效资源的加载,减轻服务器的压力和流量,减小浏览器的负担。
- 防止并发加载的资源过多会阻塞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++) { if (clientH + clientT > imgs[i].offsetTop && !imgs[i].src) { imgs[i].src = imgs[i].dataset.original; } } };
lazyLoad(imgs);
window.onscroll = () => lazyLoad(imgs);
|