Lighthouse 不断显示 Defer 屏幕外图像

Question

所以每次我运行灯塔评估时，它总是告诉我“延迟屏幕外图像”，现在，他们建议使用他们的脚本并像这样设置图像：

<img data-src="images/flower3.png" class="lazyload" alt="">

这就是我所拥有的：

    <picture>
      <source sizes="(min-width:1025px) 25vw,(min-width:0px) 100vw" 
       srcset="https://thumbor.mypage/YiZprbZxOEdzieJbcj8ZnIKIrE4=/640x0/https%3A%2F%2Fmyimage.jpg 640w,...">
      <img alt="" sizes="(min-width:1025px) 25vw,(min-width:0px) 100vw" 
         data-object-fit="cover" 
         class=" ls-is-cached lazyloaded" 
         data-src="https://thumbor.mypage/yoi8S4dSPBIU5ekNg6x7NvFFFPM=/320x0/https%3A%2F%2Fmyimage.jpg" 
         srcset="https://thumbor.mypage/YiZprbZxOEdzieJbcj8ZnIKIrE4=/640x0/https%3A%2F%2Fmyimage.jpg 640w,https://thumbor.mypage/qoSnHcwy_fuA8C2gJaKnxnCJ00A=/1024x0/https%3A%2F%2Fmyimage.jpg 1024w,...">
    </picture>

正如您所见，我检查了他们要求的两件事以匹配正确的代码：lazyload class 和 data-src 属性，也许我遗漏了一些东西但出于某种原因，它只会因几张图片而失败。请帮助！

Answer 1

简答

第二个图像具有 src 或 srcset 属性集，它将加载图像。您需要使用支持 <picture> 元素的延迟加载库，并确保您没有在 <picture> 元素上设置 src 或 srcset。

长答案

你误解了这里的一个关键方面。 class="lazyload" 和 data-src="images/flower3.png" 是 a lazy load solution using JavaScript 的一部分。如果没有相关的 JavaScript 代码，您不能只复制这些属性。

他们的例子（which I assume is this example of lazy loading 因为你没有 link 你的问题）有一个脚本你必须包含才能使延迟加载工作。

如果您查看他们的示例，这些 <img> 元素没有设置 src 属性，因此它们无效，不会加载图像。

脚本所做的是查找 <img> 具有 lazyload 的 class 元素，然后查找 data-src 属性。

然后它会获取 data-src 属性中的任何内容，并在图像位于视口内后将其添加到图像的 src 属性中。

这会使图像有效（因为 <img> 元素必须具有 src 属性才能有效并实际加载图像）等等它加载。

在您的示例中，您已经通过 HTML 中的 srcset 属性设置了 src，因此图像会立即加载，data-src 在此不执行任何操作案例.

我不确定该示例中的延迟加载库是否适用于 <picture> 元素（它似乎希望你 use an <img> element with data attributes for media queries）所以你可能想要研究一个有效的延迟加载库使用 <picture> 元素，现在您（希望）理解了为什么您的实施不起作用。

Lighthouse 不断显示 Defer 屏幕外图像

Lighthouse keeps showing Defer offscreen images

html

lighthouse

简答

长答案