延迟加载是一种等到需要时再加载资源的方法,而不是提前加载资源。这样可以减少在初始网页加载时需要加载和解析的资源量,从而提高性能。
这种技术非常适合采用初始网页加载期间在屏幕之外的图片。最棒的是,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 延迟加载网页上的图片。