延迟加载图片（webp + 后备）答案

【问题标题】：lazyload picture (webp + fallback)延迟加载图片（webp + 后备）
【发布时间】：2020-11-15 11:01:32
【问题描述】：

我想延迟加载带有后备图像的 webp 图像。

我的 html 目前看起来像这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593" style="max-width: 100%" alt="Übersetzung für Marketing und Wirtschaft">

如果我这样做，它不会在 chrome 中显示 webp 图像：

 <picture>
   <source class="center lazy" srcset="./bilder/uebersetzung-marketing-bwl.webp" type="image/webp">
   <img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593" style="max-width: 100%" alt="Übersetzung für Marketing und Wirtschaft">
 </picture>

我必须使用另一个库来解决它还是你有什么建议？

【问题讨论】：

标签： jquery lazy-loading webp jquery-lazyload image-optimization

【解决方案1】：

如果你的网站是wordpress，你可以使用这个插件https://wordpress.org/plugins/webp-express

它将为支持 webp 的浏览器加载 webp，否则将回退到主文件。

【讨论】：