lazyload图片(webp + fallback)

Question

我想用一个回退图像来延迟加载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>

我必须使用另一个库来解决这个问题吗?或者你有什么建议？

Answer 1

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

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