我无法延迟加载 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">
延迟加载工作正常。但我想将它与图片...源标签一起使用。
预先感谢您的任何回复。
最佳答案
我已经找到了解决方案。我发布它,因为也许有人会遇到类似的问题,并且没有可以轻松找到的答案。也需要在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>
延迟加载现在运行良好。
关于class - 延迟加载 webp 图像 - 如何添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54241366/