CSS图片懒加载
2024-03-16 本文已影响0人
叫丽丽啊
一、什么是图片懒加载
图片懒加载就是延迟加载，即当对象需要用到的时候再去加载。比如加载一个页面，这个页面很长很长，长到浏览器的可视区域装不下，懒加载就是优先加载可视区域的内容，其他部分等进入了可视区再加载。
图片懒加载的好处：
（1） 全部加载会影响用户的体验。全部加载浪费时间，用户不能第一时间在可视区域看到内容；
（2） 浪费用户的流量，有些用户并不想全部看完，全部加载会浪费大量的流量。
二、图片懒加载的实现思路
HTML5支持使用data-前缀设置自定义属性。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。比如，img的src属性可以设置为data-src，当需要获取到这个属性时，可以用Element.data.src得到。
节流的应用：由于用户可能出现反复反复滑动的情况，因此图片不应该立刻加载，而应该使用节流适当延时执行加载操作。
所以图片懒加载很重要的就是它的判断条件，即什么时候加载这张图片？有三种方式都可以实现
三、getBoundingClientRect().top + innerHeight
- getBoundingClientRect().top：元素至可视窗口的高度
- window.innerHerght：可视窗口的高度
-
具体解释如图所示：
image.png
因此，当getBoundingClientRect().top < window.innerHeight时，应该加载图片。
具体代码：
<body>
<div class="box">
<ul>
<li>
<img data-src="img1.jpg" alt="">
</li>
<li>
<img data-src="img2.jpg" alt="">
</li>
<li>
<img data-src="img3.jpg" alt="">
</li>
<li>
<img data-src="img1.jpg" alt="">
</li>
<li>
<img data-src="img2.jpg" alt="">
</li>
<li>
<img data-src="img3.jpg" alt="">
</li>
<li>
<img data-src="img1.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
<script>
function imgonload() {
let img = document.querySelectorAll("img");
for (let i = 0; i < img.length; i++) {
if (img[i].getBoundingClientRect().top < window.innerHeight) {
//图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
img[i].src = img[i].dataset.src;
}
}
}
function scollImg(fn) {
let timer = null;
let context = this;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context);
}, 500)
}
}
window.onload = imgonload; //html加载完毕后立即执行
window.onscroll = scollImg(imgonload); //每次滚轮滑动时都要触发
</script>
四、scrollTop+offsetTop+innerHeight
scrollTop：滚动了的距离；
offsetTop：元素相对父元素的位置；
innerHeight：当前浏览器可视窗口的大小。
展示的条件：scrollTop+innerHeight > offsetTop
具体解释如下：
image.png
具体代码：
function imgonload2(){
let img = document.querySelectorAll('img')
var innerH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
for(let i=0 ; i<img.length ; i++){
var offsetT = img[i].offsetTop;
console.log(innerH,scrollT,offsetT);
if(scrollT+innerH>offsetT){
img[i].src = img[i].dataset.src;
}
}
}
// 其他部分同上一节
window.onload = imgonload2;
window.onscroll = scollImg(imgonload2);
