<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>
