探究图片懒加载将img标签src属性指向一张默认图片（一般是loading图），然后定义data-src属性指向真实的图

原理
将img标签src属性指向一张默认图片（一般是loading图），然后定义data-src属性指向真实的图片。
图片要指定宽高

[JavaScript]

纯文本查看

复制代码

1	`<img class="lazy-img"` `src="./imgs/lazy.png"` `data-src="./imgs/fact.png"` `alt/>`

复制代码当载入页面时，监听页面滚动事件：当滚动到图片的可视区（或者还有某段固定距离）时，把图片的img标签的data-src属性值赋给src属性，从而发起请求将图片加载显示。
代码
在写代码前，需要了解各种高度。可参考这篇文章：scrollTop等元素距离

[JavaScript]

纯文本查看

复制代码

var imgs = document.querySelectorAll(".lazy-img"); // 获取所有执行懒加载操作的image dom节点

var length = imgs.length;

var start = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

lazyload();

function lazyload() {

//监听页面滚动事件

var visibleHeight = document.documentElement.clientHeight; //可见区域高度

var scrollTop =

document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度

var intervalHeight = 50; // 提前50px加载提高用户体验

var loadHeight = visibleHeight + scrollTop + intervalHeight;

for (var i = start; i < length; i++) {

if (imgs[i].offsetTop > loadHeight) {

break; // 前面的图片未进入可视区则不必继续遍历

}

imgs[i].src = imgs[i].getAttribute("data-src");

start = i + 1; // 修改遍历的起始图片

if (start === length) {

// 图片全部加载完毕，移除滚动监听

window.removeEventListener("scroll", lazyload);

}

window.addEventListener("scroll", lazyload);

链接：https://juejin.cn/post/6844904002593751054