懒加载webp图片 - 如何添加类

Question

我无法对webp图像进行懒加载，因为浏览器无法识别class属性。我正在Chrome浏览器中运行审核，以尽可能加快我的网站速度，下一步需要完成的是将屏幕外的图像进行懒加载。为此，我需要向所有这些图像添加一些类，我将在JavaScript中调用它们。但是，class属性应该放在哪里？如果我按照下面代码中的位置放置它，则该属性不会被浏览器识别。此外，一些免费在线SEO审核声称，在Chrome中运行时缺少alt属性。

<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">

懒加载很好用。但是我想将其与图片...源标签一起使用。谢谢您提前回复。

- zwora

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>

懒加载现在完美运作。

- zwora

---

这个策略对我不起作用。你有什么想法为什么会这样？ - Priyanka

你还需要一个库来实际执行图像的懒加载... - Dylan Watson

https://web.dev/codelab-use-lazysizes-to-lazyload-images/ 可以按照这个进行操作。在source和img上添加className =“lazyload”，src的值将为data-src和data-srcset。 - Germa Vinsmoke

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>

Source:
https://github.com/aFarkas/lazysizes#js-api

- MohsenB