</div>
</div>
</body>
</html>
<script>
// 获取所有的图片标签
const imgs =
document.getElementsByTagName('img')
// 获取可视区域的高度
const viewHeight = window.innerHeight ||
document.documentElement.clientHeight
// num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
let num = 0
function lazyload(){
for(let i=num; i<imgs.length; i++) {
// 用可视区域高度减去元素顶部距离可视区域顶部的高度
let distance = viewHeight - imgs[i].getBoundingClientRect().top
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
if(distance >= 0 ){
// 给元素写入真实的src，展示图片
imgs[i].src = https://www.isolves.com/it/cxkf/yy/js/2021-09-27/imgs[i].getAttribute('data-src')
// 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
num = i + 1
}
}
}
// 监听Scroll事件
window.addEventListener('scroll', lazyload, false);
</script>
图片预加载class PreLoadImage {
constructor(imgNode) {
// 获取真实的DOM节点
this.imgNode = imgNode;
}
// 操作img节点的src属性
setSrc(imgUrl) {
this.imgNode.src = https://www.isolves.com/it/cxkf/yy/js/2021-09-27/imgUrl;
}
}
class ProxyImage {
// 占位图的url地址
static LOADING_URL = "xxxxxx";
constructor(targetImage) {
// 目标Image，即PreLoadImage实例
this.targetImage = targetImage;
}
// 该方法主要操作虚拟Image，完成加载
setSrc(targetUrl) {
// 真实img节点初始化时展示的是一个占位图
this.targetImage.setSrc(ProxyImage.LOADING_URL);
// 创建一个帮我们加载图片的虚拟Image实例
const virtualImage = new Image();
// 监听目标图片加载的情况，完成时再将DOM上的真实img节点的src属性设置为目标图片的url
virtualImage.onload = () => {
this.targetImage.setSrc(targetUrl);
};
// 设置src属性，虚拟Image实例开始加载图片
virtualImage.src = https://www.isolves.com/it/cxkf/yy/js/2021-09-27/targetUrl;
}
}
ProxyImage 帮我们调度了预加载相关的工作，我们可以通过 ProxyImage 这个代理，实现对真实 img 节点的间接访问，并得到我们想要的效果 。
https://www.ixiera.com
推荐阅读
- Excel中自动序号的生成技巧，总共就这6条，你确定都掌握吗？
- 布艺沙发有哪些清洁技巧
- 沙发面料有哪些选购技巧
- 打跑得快技巧十句口诀是什么？
- Excel查找替换的经典用法和技巧，全在此文
- 工作最实用Word快捷键
- 普通复印机的维护技巧
- lazada发货用什么物流?lazada铺货技巧
- 海南青金桔产地,海南青金桔怎么腌制方法技巧
- 买衣服有什么技巧