class - 延迟加载 webp 图像 - 如何添加类

Question

我无法延迟加载 webp 图像，因为浏览器看不到类属性。

我正在 Chrome 浏览器中运行审核以尽可能加快我的网站速度，接下来要做的是让图像离开屏幕以进行延迟加载。为此，我需要向所有这些图像添加一些我将在 JavaScript 中调用的类。但是我应该把类属性放在哪里呢？如果我把它放在下面代码中的位置，则看不到该属性。还有一些免费的在线 SEO 审计声称缺少 alt 属性(当我从 Chrome 运行它们时)。

<picture>
    <source srcset="images/img1.webp" type="image/webp">
    <source srcset="images/img1.jpg" type="image/jpg">
    <img data-src="images/img1.jpg"  class="blog-img js-lazy-image" alt="some alt text">
</picture>

我还尝试将 alt 和 class 属性放在源标记中，但效果不佳。那么如何正确添加这些属性呢？

如果我只放:

<img data-src="images/img1.jpg"  class="blog-img js-lazy-image" alt="some alt text">

延迟加载工作正常。但我想将它与图片...源标签一起使用。

预先感谢您的任何回复。

Answer 1

我已经找到了解决方案。我发布它，因为也许有人会遇到类似的问题，并且没有可以轻松找到的答案。也需要在srcset前加data-，可以正常加属性:

<picture>
    <source data-srcset="images/img1.webp" type="image/webp" class="blog-img js-lazy-image" alt="some alt text">
    <source data-srcset="images/img1.jpg" type="image/jpg" class="blog-img js-lazy-image" alt="some alt text">
    <img data-src="images/img1.jpg" class="blog-img js-lazy-image" alt="some alt text">
</picture>

延迟加载现在运行良好。