[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.offsetTop > loadHeight) {
break; // 前面的图片未进入可视区则不必继续遍历
}
imgs.src = imgs.getAttribute("data-src");
start = i + 1; // 修改遍历的起始图片
if (start === length) {
// 图片全部加载完毕，移除滚动监听
window.removeEventListener("scroll", lazyload);
}
}
}
window.addEventListener("scroll", lazyload);