原理:
对于页面有很多静态资源的情况下(比如网商购物页面),为了节省用户流量和提高页面性能,可以在用户浏览到当前资源(当前窗口(可视区域)的大小)的时候,再对资源进行请求和加载。
概念:
我们的图片要显示出来的话一般是借用img标签,然后把src属性写上图片的地址,才能把图片显示出来,那就想,我们先把图片不显示出来,就来写一个自定义属性字段,把这个属性字段的值写成图片地址,当图片在可视区域的范围的时候,就把自定义属性的值作为src的值。这就实现了懒加载。
clientHeight
:浏览器视口的高度;scrollTop
:滚动轴滚动的距离;offsetTop
:图片的头部距离浏览器顶部的高度(注意不是距离视口顶部的高度);
如何让图片不加载?
在img标签的src前加上data-
在我们滚动滚动轴的时候,当下一张图片的顶部马上要出现在视口的时候去加载下一张图片。
offsetTop
:直接通过img.offsetTop
就可以获取;scrollTop
:通过document.documentElement.scrollTop
获取;clientHeight
:通过document.documentElement.clientHeight
获取;
完整js代码:
//图片懒加载
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.src;
}
}
};
// 一开始能够加载显示在视口中的图片;
lazyLoad(imgs);
// 监听滚动事件,加载后面的图片;
window.onscroll = () => lazyLoad(imgs);