使用 lazysizes 延迟加载屏幕外图片

Katie Hempenius

如需完成此 Codelab，请在第二个标签页中打开 此 Glitch。

延迟加载是指等到有需要时再加载资源，而不是提前加载。这可以减少初始网页加载时需要加载和解析的资源量，从而提高性能。

在初始网页加载期间位于屏幕外的图片非常适合使用此方法。最重要的是，lazysizes 使这一实施策略变得非常简单。

将 lazysizes 脚本添加到页面

• 点击 Remix to Edit 以使项目可修改。

lazysizes.min.js 已下载并已添加到此 Glitch 中。如需将其包含在网页中，请执行以下操作：

• 将以下 <script> 标记添加到 index.html：

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

注意 ：lazysizes.min.js 文件已添加到此项目中，因此无需单独添加。您刚刚添加的脚本可以使用此脚本。

lazysizes 会在用户滚动页面时智能地加载图片，并优先处理用户很快将会遇到的图片。

指明要延迟加载的图片

• 将 lazyload 类添加到应延迟加载的图片中。此外，请将 src 属性更改为 data-src。

例如，flower3.png 的更改如下所示：

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

在本示例中，请尝试延迟加载 flower3.png、flower4.jpg 和 flower5.jpg。

注意 ：您可能想知道为什么有必要将 src 属性更改为 data-src。如果此属性未更改，则所有图片将立即加载，而不是延迟加载。data-src 不是浏览器可识别的属性，因此当遇到具有此属性的图片标记时，不会加载该图片。在本例中，这是一件好事，因为这样一来，lazysizes 脚本就可以决定何时加载图片，而不是加载浏览器。

查看实际案例

大功告成！若要查看这些变更的实际效果，请按以下步骤操作：

• 如需预览网站，请按查看应用，然后按全屏 。

• 打开控制台，找到刚刚添加的图片。当您向下滚动页面时，它们的类应从 lazyload 更改为 lazyloaded。

• 向下滚动页面时，观察“Network”面板，可以看到图片文件逐个加载。

使用 Lighthouse 进行验证

最后，建议您使用 Lighthouse 来验证这些更改。Lighthouse 的“推迟屏幕外图片”性能评估功能会指出您是否忘了向任何屏幕外图片添加延迟加载功能。

1. 如需预览网站，请按查看应用，然后按全屏 。
2. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
3. 点击 Lighthouse 标签页。
4. 确保类别列表中的效果复选框处于选中状态。
5. 点击生成报告按钮。
6. 验证是否已通过推迟屏幕外图片审核。

成功！您已使用延迟加载网页上的图片。