图片懒加载——非框架，使用JS(两种方法)

tinyint_813

于 2021-06-19 20:34:37 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

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

本文链接：https://blog.youkuaiyun.com/tinyint_813/article/details/118058749

JS 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了两种图片懒加载技术：基于事件监听的滚动触发加载和浏览器提供的IntersectionObserver接口。事件监听可能导致性能问题，而IntersectionObserver能更智能地加载图片，但存在兼容性挑战。优化图片加载对于提升网页性能和用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件监听

监听scroll这个事件，鼠标滚动就触发
window.innerHeight是窗口显示区的高度
getBoundingClientRect().top获取图片到视口上方的高度
图片若未能显示到屏幕上:说明getBoundingClientRect().top大于window.innerHeight
data-src：不知道要在哪里下载图片。等到真正需要加载图片的时候，获取这个属性值，赋值给imgae的src

在这里插入图片描述
缺点：消耗资源，一直在触发监听事件，会造成性能问题

浏览器提供的构造函数IntersectionObserver

观察元素是否可见(isIntersecting)，如果可见，就加载图片。勿忘unobserve，避免多次加载。
在这里插入图片描述
缺点：有兼容性问题

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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