延迟加载是指等到有需要时再加载资源,而不是提前加载。这可以减少初始网页加载时需要加载和解析的资源量,从而提高性能。
在初始网页加载期间位于屏幕外的图片非常适合使用此方法。最重要的是,lazysizes 使这一实施策略变得非常简单。
将 lazysizes 脚本添加到页面
- 点击 Remix to Edit 以使项目可修改。
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
。
查看实际案例
大功告成!若要查看这些变更的实际效果,请按以下步骤操作:
如需预览网站,请按查看应用,然后按全屏 。
打开控制台,找到刚刚添加的图片。当您向下滚动页面时,它们的类应从
lazyload
更改为lazyloaded
。
- 向下滚动页面时,观察“Network”面板,可以看到图片文件逐个加载。
使用 Lighthouse 进行验证
最后,建议您使用 Lighthouse 来验证这些更改。Lighthouse 的“推迟屏幕外图片”性能评估功能会指出您是否忘了向任何屏幕外图片添加延迟加载功能。
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保类别列表中的效果复选框处于选中状态。
- 点击生成报告按钮。
- 验证是否已通过推迟屏幕外图片审核。
成功!您已使用延迟加载网页上的图片。