使用场景
一般用于图片较多的页面,常用于首页。能够加快首页的加载速度,实现首页秒开的效果。
原理
1、将需要懒加载的图片放入img的data-img属性中,img的src属性使用一张占位图(一般为1*1的图)占位;(由于页面的大量图片均为同一张占位图,所以加载页面的时候速度会很快。) 2、监测页面滚动事件。若需要懒加载的图片出现在屏幕内,则将src属性替换为data-img属性。
主要难点
1、原生JS如何获取图片在浏览器中的位置
2、兼容性问题
实现过程
对应的html页面如下
<div class="img-box">
<div class="img"><img src="g.png" data-img="https://localhost/images/1.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/2.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/3.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/4.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/5.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/6.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/7.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/8.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/9.png" /></div>
<div class="img"><img src="g.png" data-img="https://localhost/images/10.png" /></div>
</div>
对应的JS实现如下
window.addEventListener("scroll", lazyload);
function lazyload() {
var imgs = document.querySelectorAll(".img");
var scrollTop = window.offsetY || document.documentElement.scrollTop || document.body.scrollTop;
var windowHeight = window.innerHeight;
imgs.forEach(img => {
document.getBoundingClient(res => {
var y = res.y;
if (scrollTop + windowHeight >= y) {
//触发事件
img.src = img.dataset.img
}
})
})
}
个人疑惑
之前看到有人在页面加载完后,将已经加载好的图片用占位图替换,重新实现懒加载。
懒加载的目的不是为了实现首页秒开吗?既然首页都已经加载完了,再使用懒加载不是多此一举吗?