前言：页面初始化图片资源过多，导致访问页面时加载卡顿，不流畅，影响用户体验。
原理：
通过判断每个图片是否在可视区域内，绑定页面滚动事件，满足则加载图片。
图片在可视区域内：图片距离顶部的高度<可视区域高度+滚动条滚动的高度
// 懒加载原理
let num = document.getElementsByTagName('img').length;
let img = document.getElementsByTagName('img');
let n = 0;
lazyload()//初始化
window.onscroll = lazyload;//绑定滚动事件
function lazyload() {
let seeHeight = document.documentElement.clientHeight;//可视区域高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条滚动的距离
for (let i = 0; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {//图片进入可视区域内
if (img[i].getAttribute("src") == "C:/Users/jc/Desktop/loading.gif") {//存在则重新赋值
// 加载正确图片路径
img[i].src = img[i].getAttribute("data-img")
}
n = i + 1;//防止重复加载
}
}
}
//完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
img {
display: block;
margin: 160px auto;
}
</style>
<body>
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand01.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand02.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand03.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand04.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand05.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand06.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand07.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand08.png">
<img src="C:/Users/jc/Desktop/loading.gif" data-img="img/brand09.png">
<script>
// 懒加载原理
let num = document.getElementsByTagName('img').length;
let img = document.getElementsByTagName('img');
let n = 0;
lazyload()//初始化
window.onscroll = lazyload;//绑定滚动事件
function lazyload() {
let seeHeight = document.documentElement.clientHeight;//可视区域高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条滚动的距离
for (let i = 0; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {//图片进入可视区域内
if (img[i].getAttribute("src") == "C:/Users/jc/Desktop/loading.gif") {//存在则重新赋值
// 加载正确图片路径
img[i].src = img[i].getAttribute("data-img")
}
n = i + 1;//防止重复加载
}
}
}
</script>
</body>
</html>
