WEBP图像回落

Har*_*hul 8 html javascript css jquery webp

我在互联网上搜索了很多,无法在网上找到正确的示例或完整的教程,可以全面教授.那么伙计们请给我一些很好的例子.

我在很多地方或网站上尝试过WEBP代码,比如使用现代化程序,检查浏览器支持或使用背景图像.

Hon*_*nna 4

有一篇关于 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');
}
Run Code Online (Sandbox Code Playgroud)

http://www.stucox.com/blog/using-webp-with-modernizr/

  • 但这没有帮助,无论如何都需要 jpg。 (6认同)
  • 如果 css 一致(关键 css),首先下载 jpg 图像,然后在 dom 准备好 webp 时,不是吗? (2认同)