Katie Hempenius
延迟加载是一种等到需要时再加载资源的方法，而不是提前加载资源。这样可以减少在初始网页加载时需要加载和解析的资源量，从而提高性能。
这种技术非常适合采用初始网页加载期间在屏幕之外的图片。最棒的是，lazysizes 使实现该策略变得非常简单。
将 lazysizes 脚本添加到网页
- 点击 Remix to Edit 使项目可修改。
已下载“lazysizes.min.js”并将其添加到此故障。如需将其添加到页面中，请执行以下操作：
- 将以下
<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。
查看实际案例
大功告成！如需查看这些更改的实际效果，请按以下步骤操作：
如需预览网站，请按查看应用，然后按全屏
。打开控制台，然后找到刚刚添加的图片。当您向下滚动页面时，其类应从
lazyload更改为lazyloaded。
- 查看网络面板，看看在您向下滚动页面时，各个图片文件会分别加载。
使用 Lighthouse 验证
最后，建议您使用 Lighthouse 来验证这些更改。如果您忘记了向任何屏幕外图片添加延迟加载，Lighthouse 的“推迟屏幕外图片”性能审核将会提示您。
- 如需预览网站，请按查看应用，然后按全屏
。
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保已选中类别列表中的效果复选框。
- 点击生成报告按钮。
- 确认已通过推迟屏幕外图片审核。
成功！您已使用 Lazysize 延迟加载网页上的图片。