jQuery lazyload图片和带有回退的Webp

Question

我有点困惑如何将图片后备解决方案与jquery lazyload结合使用。

目前，我的图像是这样整合的：

<img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593>

但是webp后备解决方案的结构如下：

<picture>
      <source srcset="./bilder/Uebersetzungsdienst-Jena-BM-Translations.webp" type="image/webp">
      <img class="imgWindowwidth refDesktop center" src="./bilder/Uebersetzungsdienst-Jena-BM-Translations.png" width="1920" height="97" alt="Uebersetzungsdienst-Jena-BM-Translations">
</picture>

我的问题：

1. 我也必须将样式/类也提供给webp吗？
2. 集成的lazyload查找data-original，因此它不适用于srcset。有解决方案吗？

Answer 1

我找到了解决方案，需要使用自定义属性以特定格式添加数据。 该代码可以完美地工作，并有助于您添加Web或其他格式的图像来优化页面。

注意：所有具有相同名称的格式图像，例如

• image_1.png
• image_1.jpg
• image_1.webp

仅更改扩展名而不是名称

$('body').bind("mousewheel", function() {
    return false;
});

延迟加载现在可以正常工作。