图片懒加载

• 介绍
• HTML实现方式
• JS实现方式

介绍

懒加载是一种网页性能优化的方式，能极大的提升用户的体验，图片一直是影响网页性能的主要因素，现在一张清晰的图片动则几M是很正常的事情了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户早就离开了。所以我们需要对图片进行懒加载，进入页面的时候只对可视区域的图片进行资源请求。

多图片网页不使用懒加载的话就会造成以下两个问题：

1. 全部加载图片影响用户体验
2. 浪费用户流量，网页中其实有些内容用户其实并不想看完。

HTML实现方式

懒加载最简单的实现方式就是给img标签加上loading="lazy"

loading 有两个属性值 eager:默认,图像立即加载，lazy:图片延迟加载。
示例：

从图中图片资源加载的顺序来看lazy是起作用了，改变了原有img资源加载的顺序。这个时候可能就会有人问，这种方式还是浪费了用户流量，所有图片资源都加载了。所以有了下面这种方式

JS实现方式

我们可以通过js监听页面的滚动来进行实现比上面的方式更好。

使用js来处理的原理是判断当前图片是否到了可视区域：

1. 拿到所有图片的dom
2. 遍历每个图片判断当前图片是否到了可视区域的范围内。
3. 到了就是设置src的值。
4. 使用window.scroll对事件进行监听

实现代码如下：

效果图：

在线地址：图片懒加载示例