懒加载常见的两个方式

萌新且暴龙战士

已于 2023-05-27 20:35:06 修改

阅读量57

点赞数

文章标签： javascript

于 2023-05-27 17:49:43 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_68314577/article/details/130903910

版权

该文介绍了一种利用JavaScript实现图片懒加载的方法，通过监听scroll事件，判断图片是否进入可视区域，使用data-src属性暂存真实图片源，当图片进入可视区域时，将data-src赋值给src属性加载图片，并通过防抖处理优化scroll事件的性能。

摘要由CSDN通过智能技术生成

1.用scroll事件，每次滚动的时候判断图片是否出现在可视区域了

2.用foreach来遍历每张图片到顶部的距离，如果图片距离视窗顶部的距离小于窗口显示区的高度

那么久要让图片开始加载

3.在html里面自定义属性（data-*）在图片上面来进行表示，浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的，因此我们可以把src属性改为data-src，这样就相当于不知道要在哪里下载这些图片了

4.当图片距离视窗顶部的距离小于窗口显示区的高度，把自定义属性赋值给原来的属性

5.最后对 scroll事件做防抖处理（就是定时器在固定时间内只触发一次），因为滚动事件每滚动触发的次数会很频繁，随便截了一个例子，具体代码结合具体实现

下面是一个例子（不应用于具体业务，只是单纯的一个例子演示）

<body>

<div class="container">

<div class="img">

<img class="pic" alt="加载中"

data-src="https://tse1-mm.cn.bing.net/th/id/OIP.8OrEFn_rKe82kqAWFjTuMwHaEo?pid=Api&rs=1" />

</div>

<div class="img">

<img class="pic" alt="加载中"

data-src="https://ssl.tzoo-img.com/images/tzoo.94911.0.910013.seoul-nami.jpg?width=1080" />

</div>

<div class="img">

<img class="pic" alt="加载中"

data-src="https://tse4-mm.cn.bing.net/th/id/OIP.ZitgAuABnwkrGn4lid2ZmQHaEK?pid=Api&rs=1" />

</div>

<div class="img">

<img class="pic" alt="加载中" data-src="http://pic34.photophoto.cn/20150315/0034034862056002_b.jpg" />

</div>

<div class="img">

<img class="pic" alt="加载中"

data-src="http://img.mp.sohu.com/upload/20170724/32d4409f34194b029ed287abf1c99b70_th.png" />

</div>

<div class="img">

<img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075991913520.jpg" />

</div>

<div class="img">

<img class="pic" alt="加载中"

data-src="https://tse4-mm.cn.bing.net/th/id/OIP.PZdPKj3sXEX2jLrepx3MUwHaEo?pid=Api&rs=1" />

</div>

<div class="img">

<img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075831439349.jpg" />

</div>

<div class="img">

<img class="pic" alt="加载中" data-src="https://pic6.wed114.cn/20180829/2018082910075468043336.jpg" />

</div>

<div class="img">

<img class="pic" alt="加载中"

data-src="https://tse2-mm.cn.bing.net/th/id/OIP.CRYz5Bv4vylsMh83G4CsLgHaFj?pid=Api&rs=1" />

</div>

</div>

<script>

// 获取所有的图片标签

const imgs = document.getElementsByTagName("img");

//获取所有div盒子

// .........................................

// 获取可视区域的高度

const viewHeight =

window.innerHeight || document.documentElement.clientHeight;

// num用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出

let num = 0;

function lazyload() {

console.log("滚动...");

for (let i = num; i < imgs.length; i++) {

// 用可视区域高度减去元素顶部距离可视区域顶部的高度

let distance = viewHeight - imgs[i].getBoundingClientRect().top;

// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出

if (distance >= 0) {

// 给元素写入真实的src，展示图片

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

// 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出

num = i + 1;

}

}

}

// 防抖函数

function debounce(fn, delay) {

var timer = null;

delay = delay || 500;

return function () {

var args = Array.prototype.slice.call(arguments);

if (timer) clearTimeout(timer);

timer = setTimeout(function () {

fn.apply(this, args);

}, delay);

};

}

// 是的页面初始化是加载首屏图片

window.onload = lazyload;

// 监听Scroll事件，为了防止频繁调用，使用防抖函数优化一下

window.addEventListener("scroll", debounce(lazyload, 600), false);

</script>

</body>

效果图如下：

萌新且暴龙战士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
懒加载常见的两个方式

3.在html里面自定义属性（data-*）在图片上面来进行表示，浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的，因此我们可以把src属性改为data-src，这样就相当于不知道要在哪里下载这些图片了。2.用foreach来遍历每张图片到顶部的距离，如果图片距离视窗顶部的距离小于窗口显示区的高度。4.当图片距离视窗顶部的距离小于窗口显示区的高度，把自定义属性赋值给原来的属性。1.用scroll事件，每次滚动的时候判断图片是否出现在可视区域了。那么久要让图片开始加载。
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。