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

【问题标题】：Lazyloading webp images - how to add the class延迟加载 webp 图像 - 如何添加类
【发布时间】：2019-01-17 17:34:37
【问题描述】：

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

我正在 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">

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

提前感谢您的任何回复。

【问题讨论】：

标签： class lazy-loading alt webp

【解决方案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>

延迟加载现在运行良好。

【讨论】：

这对我来说不适用于相同的策略。知道为什么吗？
您还需要一个库来实际执行图像的延迟加载...
web.dev/codelab-use-lazysizes-to-lazyload-images 也可以关注这个。将 className="lazyload" 添加到 source 和 img 并且 src 的值将是 data-src 和 data-srcset

【解决方案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

【讨论】：