【javascript】图片懒加载实现方法

最新推荐文章于 2024-05-17 14:04:51 发布

ZJTT

最新推荐文章于 2024-05-17 14:04:51 发布

阅读量444

点赞数 2

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/dz1999/article/details/125586818

版权

本文介绍了如何使用IntersectionObserver JavaScript API实现图片懒加载。通过设置默认的loading.gif图片，然后利用data-属性存储真实图片源，在图片进入视口时进行替换，达到优化页面加载性能的效果。

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

一、首先来多点<br>把图片往下面排，之后在写上img标签这里是图片布局的位置（这里我演示效果样子就直接放img了），把图片引进来（这里src引进来的是默认图片，这里我用loading.gif默认显示）,然后用data-这个自定义属性放入正确图片的src,同来替换。

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>