在项目中，我们常常使用到图片懒加载的功能，但是大部分情况都会选择一个插件来实现的。图片懒加载的意思就是展示当前用户可视高度中的图片，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。
效果
原理
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。注意，图片要指定宽高。
代码
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
object-fit: contain;
}
</style>
<body>
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img1.baidu.com/it/u=2678041318,2704958857&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img2.baidu.com/it/u=3787839024,3504418695&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img2.baidu.com/it/u=2553529948,3149210166&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img1.baidu.com/it/u=2490267055,2137400732&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://www.ssfiction.com/wp-content/uploads/2020/08/20200805_5f2a9346066d9.jpg" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img2.baidu.com/it/u=846636003,1421439355&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img1.baidu.com/it/u=3478307451,1473710377&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img2.baidu.com/it/u=3439632478,727667147&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img2.baidu.com/it/u=2920318743,3883334701&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img0.baidu.com/it/u=2618315177,1852655267&fm=253" alt="">
<img src="https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif" data-src="https://img2.baidu.com/it/u=84759834,292734241&fm=253" alt="">
</body>
<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 = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "https://img.zcool.cn/community/01110e57bbc1400000012e7ec358d8.gif") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>
