使用 modernizer 检测浏览器中的 webp 支持

Question

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

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

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

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

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

唉，我没有收到任何提醒消息。

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

谁知道怎么回事。

干杯

Answer 1

它工作得很好，这是一个工作片段：

/*
  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>

Answer 2

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

Using modernizer to detect webp support in browser