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

Question

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

我正在运行在 Chrome 浏览器中进行审核，以尽可能加快我的网站速度，接下来要做的是让图像离开屏幕以进行延迟加载.为此，我需要向所有这些图像添加一些 class，我将在 JavaScript 中调用它们。但是我应该把 class 属性放在哪里呢？如果我把它放在下面代码中的位置，则看不到该属性。还有一些免费的在线 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>

延迟加载现在运行良好。

Answer 2

使用此代码：

<picture>
    <!--[if IE 9]><video style="display: none;><![endif]-->
    <source data-srcset="images/img1.webp" type="image/webp">
    <source data-srcset="images/img1.jpg" type="image/jpg">
    <!--[if IE 9]></video><![endif]-->
    <img    
        data-src="images/img1.jpg"
        class="lazyload"
        alt="image with artdirection" />
</picture>

来源：
https://github.com/aFarkas/lazysizes#js-api

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

Lazyloading webp images - how to add the class

lazy-loading

class

alt

webp