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

Nov 5, 2018

Appears in: 快速加载

Katie Hempenius

TwitterGitHubGlitchHomepage

延迟加载是一种进行等待直到需要资源时才进行加载的方法，而不是提前加载资源。这可以减少初始页面加载时需要加载和解析的资源量，从而提高性能。

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

将 lazysizes 脚本添加到页面 #

• Click Remix to Edit to make the project editable.

lazysizes.min.js 已被下载并添加到该 Glitch 中。要将其包含在页面中：

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

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

当用户滚动页面时，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。

实现方式 #

就是这样！要查看这些更改的实际效果，请按照以下步骤操作：

• To preview the site, press View App. Then press Fullscreen .

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

• 向下滚动页面时，注视网络面板，可以看到图像文件逐个添加。

使用 Lighthouse 进行验证 #

最后，最好使用 Lighthouse 来验证这些更改。Lighthouse 的“延迟屏幕外图像”性能审核将提醒您是否忘记了向任何屏幕外图像添加延迟加载。

1. To preview the site, press View App. Then press Fullscreen . 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

2. Click the Lighthouse tab.

3. Make sure the Performance checkbox is selected in the Categories list.

4. Click the Generate report button.

5. 验证延迟屏幕外图像审核已通过。

成功！您已使用 lazysizes 延迟加载了您页面上的图像。