如何用原生JS实现图片懒加载来优化页面性能？

本文共计1525个文字，预计阅读时间需要7分钟。

在项目开发中，我们经常会遇到一个页面需要加载大量图片的情况。我们可以一次性加载全部图片，但考虑到用户可能只需浏览部分图片，因此需要优化图片加载，只加载用户可能查看的部分。

在项目开发中，我们往往会遇到一个页面需要加载很多图片的情况。我们可以一次性加载全部的图片，但是考虑到用户有可能只浏览部分图片。所以我们需要对图片加载进行优化，只加载浏览器窗口内的图片，当用户滚动时，再加载更多的图片。这种加载图片的方式叫做图片懒加载，又叫做按需加载或图片的延时加载。这样做的好处是：1.可以加快页面首屏渲染的速度；2.节约用户的流量。

一.实现思路

1.图片img标签自定义一个属性data-src来存放真实的地址。

2.当滚动页面时，检查所有的img标签，判断是否出现在事业中，如果出现在视野中，继续进行判断，看齐是否被加载过了，如果没有加载，那就进行加载。