[英]WEBP image fall back
我在互联网上搜索了很多内容,却找不到合适的示例,也无法在网上找到完整的教授完整的教程。 所以伙计们请给我推荐一些很好的例子。
我曾在很多网站上尝试过WEBP代码,例如与现代化工具一起使用,检查浏览器支持或使用背景图片。
在stucox上有一篇文章,您可以在其中使用结合了modernizr和后备图像的webp图像找到一些示例。 这应该可以解决您的问题。
/* Result pending */
.js .container {
background-image: none;
}
/* No JS / WebP not supported */
.no-js .container,
.js.no-webp .container {
background-image: url('image.jpg');
}
/* WebP supported */
.js.webp .container {
background-image: url('image.webp');
}
您可以使用onerror事件处理程序并对其进行修复。
这是示例代码
<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">
您应该使用图片 html元素,如w3schools所述 :
<picture>
<source type="image/webp" srcset="img_pink_flowers.webp">
<source srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
最后的img声明是不兼容浏览器的后备。 来源的顺序定义了每种格式的重要性。 因此,如果第一个在其浏览器中可用,则将加载第一个。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.