jquery - 延迟加载图片（webp + 后备）

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

If your site is in wordpress, you can use this plugin https://wordpress.org/plugins/webp-express

it will load webp for webp supported browser, otherwise it will fallback to the main file.