js图片懒加载可以延迟内存占用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
</head>
<body>
<div style="height: 100vh;width: 100vh;background-color: #FFB866" ></div>
<div style="display: flex; flex-direction: column">
<img data-src="../../site-test/images/lunbo1.jpg" src="lunbo1.jpg" alt="" class="img">
<img data-src="../../site-test/images/lunbo2.jpg" src="lunbo2.jpg" alt="" class="img">
<img data-src="../../site-test/images/lunbo3.jpg" src="lunbo3.jpg" alt="" class="img">
<img data-src="../../site-test/images/lunbo5.jpg" src="lunbo5.jpg" alt="" class="img">
<img data-src="../../site-test/images/lunbo6.jpg" src="lunbo6.jpg" alt="" class="img">
<img data-src="../../site-test/images/sunset1.jpg" src="sunset1.jpg" alt="" class="img">
</div>
<script>
//待加载的图片列表
let imgList = [...document.querySelectorAll('.img')]
let length = imgList.length
function lazyLoad() {
let count = 0;
//记录已经加载完成的img,为了从待加载列表中删除。这里存放的只是下标
let deleteimgList= [];
imgList.forEach((img ,index) => {
//方法返回元素的大小及其相对于视口的位置,是一个DOMRect对象。包括left,top,right,bottom,width,height,x(=left),y(=top)
let rect = img.getBoundingClientRect()
// window.innerHeight为浏览器窗口视口的高度
//如果img的top值小于当前视口的高度,说明img开始进入视口,要开始加载了
if (rect.top<window.innerHeight){
img.src = img.getAttribute('data-src')
//加载完成,放入待删除列表
deleteimgList.push(index)
count++;
if (count === length){
//全部加载完成,移除事件监听
document.removeEventListener('scroll',lazyLoad)
}
}
})
//更新列表
//filter函数接收一个回调函数作为参数,返回一个新数组。还有一个可选的thisArg参数,作为被调用时的this值
// 对数组中的每个元素放入该回调函数进行测试,通过测试返回true,加入新数组中,否则返回false不加入新数组
//该回调函数接受三个参数,elem,当前正在处理的元素,index(可选),array(调用filter函数本身的数组,例如这里就是imgList)
//includes函数判断一个数组是否包含一个指定的值,返回true或false
imgList = imgList.filter((img, index) => !deleteimgList.includes(index))
}
window.addEventListener('scroll',lazyLoad)
/*
* 总体思路,为了提升响应速度,可以对暂时不会展示到页面上的数据进行懒加载,需要的时候再加载
* 将src值存放在另一个属性中,需要加载的时候再赋值,然后发送请求。这样还使得请求分散。懒加载一般和防抖一起使用
* 上面代码多了两个精心处理的地方:1.加载完成的图像从imgList中移除 2.全部加载完成后移除监听
*/
</script>
</body>
</html>