使用 Modernizer 检测浏览器对 WebP 的支持

Question

我不确定我在哪里出错了，但这似乎很简单。我正在尝试检测webp支持。

所以我去了modernizer网站，检查了webp选项，然后下载了脚本。

我使用wordpress函数文件添加了脚本，并确认它正在前端加载。

然后在脚本加载后，我使用以下代码来检测是否支持webp：

/*
*   Check webp support
*/
if (Modernizr.webp) {
    alert('webp supported');
} else {
    alert('webp not supported');
}

哎呀，我没有收到任何警报信息。

在开发工具控制台中也没有错误消息。

有人知道出了什么问题吗？

谢谢

- Web Dev Guy

Answer 1

Modernizr.on('webp', function (result) {
  if (result) {
    // Has WebP support
  }
  else {
    // No WebP support
  }
});

- Vaibhav N Naik

---

Modernizr.on is not a function 这个语法从哪里来的？ - Bamieh

使用 Modernizr v3 与 WebP - Vaibhav N Naik

Answer 2

它正常工作，这里是一个可用的代码片段：

/*
  Check webp support
 */

if (Modernizr.webp) {
    console.log('webp supported');
} else {
    console.log('webp not supported');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

- Bamieh

---

嗨，Ahmad，这一定是某种缓存问题，清除了缓存后它有点能用了。但我知道Firefox不支持WebP，但是这个运行了console.log('webp supported');。 - Web Dev Guy

我正在阅读关于在版本3中修复的错误，而我的代码片段使用的是2.8.3。也许这就是问题所在。火狐浏览器计划支持WebP，请在此处检查：https://bugzilla.mozilla.org/show_bug.cgi?id=1294490，因此也许您已经启用了它？请检查一下。 - Bamieh

已更改为2.8.3，但仍然无法正常工作。我使用的是Firefox版本55.0.3。 - Web Dev Guy