使用 lazysizes 延迟加载图像

Nov 5, 2018 — 更新日期 Apr 10, 2019

Available in: Español, 한국어, Português, English

Appears in: 快速加载

Katie Hempenius

TwitterGitHubGlitchHomepage

延迟加载是根据需要加载资源的策略，而不是提前加载。这种方法在初始页面加载期间释放资源，可以避免加载从未不使用的资产。

在初始页面加载期间屏幕外的图像是此技术的理想候选者。最重要的是，lazysizes 让该技术成为非常简单的实现策略。

什么是 lazysizes？ #

lazysizes 是最流行的延迟加载图像库。它是一个脚本，可以在用户浏览网页时智能地加载图像，并对用户很快会遇到的图像进行优先级排序。

添加 lazysizes #

添加 lazysizes 很简单：

• 将 lazysizes 脚本添加到网页。
• 选择要延迟加载的图像。
• 更新这些图像的<img>和/或<picture>标签。

添加 lazysizes 脚本 #

将 lazysizes 脚本添加到网页：

<script src="lazysizes.min.js" async></script>

更新<img>和/或<picture>标签 #

<img>标签说明

之前：

<img src="flower.jpg" alt="">

之后：

<img data-src="flower.jpg" class="lazyload" alt="">

更新<img>标签时会进行两项更改：

• 添加lazyload类：这会向lazysizes 表明应该延迟加载图像。
• 将src属性改为data-src ：在加载图像时，lazysizes 代码会使用data-src属性中的值设置图像的src属性。

<picture>标签说明

之前：

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

之后：

<picture>
  <source type="image/webp" data-srcset="flower.webp">
  <source type="image/jpeg" data-srcset="flower.jpg">
  <img data-src="flower.jpg" class="lazyload" alt="">
</picture>

更新<picture>标签时会进行两项更改：

• 向<img>标签添加lazyload类。
• 将<source>标签的srcset属性改为data-srcset 。

验证 #

打开 DevTools 并向下滚动页面以查看这些更改的实际效果。在滚动时，您应该会看到新的网络请求发生，并且<img>标记类从lazyload变成了lazyloaded 。

此外，您可以使用 Lighthouse 来验证是否确保延迟加载任何屏幕外图像。运行 Lighthouse 性能审计（ Lighthouse > Options > Performance ）并查找延迟加载屏幕外图像审计的结果。