Question

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

我正在Chrome浏览器中运行审核，以尽可能加快我的网站的速度，接下来要做的是使屏幕外的图像可以延迟加载。为此，我需要在所有这些图像中添加一些我将在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属性放在source标记内，但效果不佳。那么正确添加这些属性的方法是什么？

如果我只说：

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

延迟加载可以正常工作。但我想将其与picture ... source标签一起使用。

在此先感谢您的答复。

Answer 1

我已经找到了解决方案。我正在发布它，因为也许有人会遇到类似的问题，并且没有容易找到的答案。还需要在srcset之前添加数据，并且属性可以正常添加：

<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图像-如何添加类

2 个答案: