html 使用 Jquery 懒加载 与 webp 整合优化

程序猿日常

快过年了！

引入jquery.lazyload.lz.js

<img src="occupying270.png" data-original="4304485231505859.jpg" webp="true">

webp="true" ，该img路径使用webp格式模式，判断客户端是否兼容webp格式，如果客户端兼容webp格式，该img路径使用data-original替换.jpg或.jpeg 为.webp路径，如果不兼容使用data-original设置的路径。

webp="false" 或 webp属性未设置，该img路径使用data-original设置的路径。

$("img").lazyload({
threshold : 200,
effect: "fadeIn"
});