如何实现图片懒加载

发布于2/23/2020 来自:「前端知否」微信公众号

什么是延迟加载图像?

延迟加载是一种在页面加载时延迟非关键资源加载的技术。也就是说只会在真正需要时才去加载资源。

延迟加载延迟了页面上不需要的图像的加载。当页面滚动时,用户看不见的图像将在之后滚动出现时进行加载。如果用户从不滚动,则不会加载用户不可见的图像。

它具有两个主要优点

1.性能提升

通过延迟加载,我们减少了最初需要在页面上加载的图像数量。较少的资源请求意味着较少的字节下载量,以及对用户可用的有限网络带宽的较少竞争。这样可以确保设备能够更快地下载和处理剩余资源。因此,与没有延迟加载的页面相比,该页面变得更快可用。

2.降低成本

对我们来说,第二个好处是减少网络带宽运输成本。图像传送或任何其他资源的传送通常根据传输的字节数收费。

延迟加载图像

1.)使用Intersection Observer

Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档视口相交变化的方法。

我们可以注册一个回调函数,该函数在您要监视的元素进入或退出另一个元素(或视口)时执行。

您需要将选项对象传递给Intersection Observer构造函数,它具有以下字段:

root:

用作视口的元素,用于检查目标的可见性。默认为视口。

rootMargin:

围绕root的外边距。可以具有类似于CSS margin属性的值,例如"10px 20px 30px 40px"(顶部,右侧,底部,左侧)。值可以是百分比。

threshhold阈值:

它可以使用一个数字或一个数字数组,这些数字指示您要检测并触发回调的百分比。如果只想检测可见性超过50%的标记,则可以使用值0.5。如果您传递[0,0.25,0.5,0.75,1]这样的数组,则每当可见性每增加25%时,回调将执行。默认值为0(意味着即使可见一个像素,回调也将执行)。

xxx

2.)使用event handler(最兼容)

在滚动事件上使用事件监听器,并且每次用户滚动到页面末尾时,我们都可以触发fetch调用以获取更多图像。

此方法适用于所有浏览器。

注意:尽可能使用Intersection Observer,如果最广泛的兼容性是应用程序硬性要求,则退回到使用事件处理程序。

3)Web原生延迟加载

Chrome浏览器已经根据不同的优先级加载了图像,具体取决于它们相对于设备视口的位置。视口下方的图像会以较低的优先级加载,但仍会尽快获取。

在Chrome 76中,我们可以使用loading属性完全延迟视口屏幕外的图像和iframe的加载:

如果您的浏览器未启用延迟加载,则可以在此处启用它:chrome:// flags

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

<iframe src="https://example.com" loading="lazy"></iframe>

以下是loading属性支持的值:

->auto:浏览器的默认延迟加载行为,与不包含loading属性相同。

->lazy:延迟资源的加载,直到到达视口的计算距离为止。

->eager:立即加载资源,而不管其在页面上的位置。

xxx

演示时间

该演示显示了上面讨论的不同方法之间的差异

第一个单选按钮用于"Intersection Observer",您可以看到基于rootMargin加载时仅发出了三个图像请求

xxx

下边这种情况是原生chrome支持,100张图片加载了20张

xxx

第三个是默认情况,在这种情况下,即使用户可能不会滚动那么远,我们也可以看到所有100张图像都已下载

xxx