Lighthouse 一直显示延迟离屏图像

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 类和 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，因为您没有在问题中链接它），您必须包含一个脚本才能使延迟加载工作。

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

脚本的作用是查找具有lazyload 类的<img> 元素，然后查找data-src 属性。

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

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

在您的示例中，您已经通过 HTML 中的 srcset 属性设置了 src，因此图像会立即加载，data-src 在这种情况下什么也不做。

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