JS实现懒加载
网页显示图片的时候会通过src属性去加载图片，未防止报错，我们可以先将src的地址置空，然后再自定义一个data属性，在以后显示到这张图片的时候，把src的地址重新指向data的地址，就可以获得并显示图片。
1
2
3
4
5
6
7
8
9
10
11
12
13
| HTML部分
<ul>
<li><img src="" data="./img/1.jpg" alt=""></li>
<li><img src="" data="./img/2.jpg" alt=""></li>
<li><img src="" data="./img/10.jpg" alt=""></li>
<li><img src="" data="./img/3.jpg" alt=""></li>
<li><img src="" data="./img/4.jpg" alt=""></li>
<li><img src="" data="./img/5.jpg" alt=""></li>
<li><img src="" data="./img/6.jpg" alt=""></li>
<li><img src="" data="./img/7.jpg" alt=""></li>
<li><img src="" data="./img/8.jpg" alt=""></li>
<li><img src="" data="./img/9.jpg" alt=""></li>
</ul>
|
上一下图，声明这个图不是我画的，我对各种距离是有点晕的，感谢这张图解救了我。
实现懒加载的关键是判断什么时候开始加载，想象一下，在滚动鼠标浏览图片的时候，当下一张图片要进入页面的时候你要保证它这个时候已经加载出来了，这时候的条件是什么呢？就是当前的视口大小+已经滚动的距离>下一张图片到顶部的距离（表明下一张图片开始露头了）
onload事件会在页面或者图像加载完成后立即发生
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <script>
window.onload = function(){
// 获取图片列表，即img标签列表
let imgs = document.querySelectorAll('img');
// 懒加载实现
function lazyload(imgs){
// 可视区域高度
let viewHeight = window.innerHeight;
//滚动区域高度
let scrollTop= document.documentElement.scrollTop || document.body.scrollTop;
for(let i=0;i<imgs.length;i++){
let offsetTop = imgs[i].offsetTop;
//关键性代码
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((viewHeight+scrollTop)>offsetTop) {
imgs[i].src = imgs[i].getAttribute('data')
}
}
}
lazyload(imgs);//保证在未滚动之前先显示该显示的画面
// 滚屏的时候执行该函数
window.onscroll =function(){
lazyload(imgs);
}
}
</script>
|