图片的懒加载

最新推荐文章于 2024-05-30 17:38:42 发布

ienyh

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量3.2k

点赞数 6

分类专栏： html&css Javascript笔记文章标签： javascript html5 前端

本文链接：https://blog.csdn.net/qq_45265059/article/details/118003687

版权

坚持，记笔记 😀, 加油!

在这里插入图片描述

图片懒加载也就是图片的延迟加载，实现图片的懒加载有两个思路：

事件监听：监听scroll事件，鼠标滚动就触发
IntersectionObserver：按字面意思就是交叉观察，也就是目标元素和可视窗口会产生交叉区域，观察交叉区域发生什么事情，执行什么程序

下面是示范用的html代码

 <body>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载</p>
   <p>图片懒加载也就是图片的延迟加载