一段判断浏览器是否支持WebP的js代码

转载于 2017-01-22 11:27:00 发布 · 293 阅读

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/658261

启发文章:
1.探究WebP一些事儿
2.采用WebP动态响应图片

代码

window.isSupportWebp = false;//是否支持
(function() {
    var img = new Image(); 
    function getResult(event) {
        //如果进入加载且图片宽度为1(通过图片宽度值判断图片是否可以显示)
        window.isSupportWebp = event && event.type === 'load' ? img.width == 1 : false;
    }
    img.onerror = getResult;
    img.onload = getResult;
    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='; //一像素图片
})();