我在网页上插入了图像延迟，但 Google SpeedTest 告诉我考虑延迟加载屏幕外和隐藏图像答案

【问题标题】：I inserted image deferring on my webpages, but Google SpeedTest tells me to consider lazy-loading offscreen and hidden images我在网页上插入了图像延迟，但 Google SpeedTest 告诉我考虑延迟加载屏幕外和隐藏图像
【发布时间】：2019-03-01 04:42:17
【问题描述】：

为了在我的 webpsges 上显示图像，我插入了本网站提供的解决方案 https://varvy.com/pagespeed/defer-images.html

我修改了 IMG 调用

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">

并在页面底部插入JS代码

<script>function init() { var imgDefer = document.getElementsByTagName('img'); for (var i = 0; i < imgDefer.length; i++) {if (imgDefer[i].getAttribute('data-src')) {      imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));}}} window.onload = init; </script>

它工作正常。但是，在使用 Google 的“PageSpeed Insights”工具时，我仍然收到以下消息：

Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive

我认为修复是有效的“延迟加载屏幕外”解决方案吗？我以为它会解决问题。其他修复是更好的解决方案吗？谢谢。

【问题讨论】：

标签： performance pagespeed

【解决方案1】：

我建议使用 lozad.js + polyfill 来延迟屏幕外图像（也称为延迟加载）。我还没有读过 varvy 的文章，但有人写过，该方法仅将图像的加载推迟到 onload 事件之后，因此页面的初始加载权重保持不变。

在图像即将滚动到视口之前，Lozad 不会加载图像。

对于<img>s，使用空的<svg> 作为初始src 值，其中6 9 中的viewBox 定义了宽度（6）和高度（9）之间的关系=> 将这些值更改为适合您的上下文。这将确保图像加载后页面布局中没有重排。

src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3C/svg%3E"

请注意，lozad.js 使用的 Intersection Observer API 仍然缺乏浏览器支持，因此请务必添加一个 polyfill。

祝你好运！

【讨论】：