Javascript检测浏览器对WebP的支持
tjuking opened this issue · comments
WebP格式的图片在图片大小方面有着很大的优势,所以从性能优化的角度我们需要考虑在一些情况下使用WebP图片。
目前在Chrome和Opera已经开始支持WebP格式(详细请点击http://caniuse.com/#feat=webp),未来我相信会有更多的浏览器加入。所以我们在检测WebP的浏览器兼容性时,应该采取特征检测方法。
借鉴WebPJS的思路,我们将生成一个1*1像素的WebP图片(采用data URI方式是因为可以减少图片请求,更快达到检测的效果),示例代码如下:
var WebP = new Image();
WebP.onload = WebP.onerror = function(){
window.supportWebP = WebP.height == 1;
};
WebP.src = "data:image/webp;base64,UklGRiYAAABXRUJQVlA4IBoAAAAwAQCdASoBAAEAAAAMJaQAA3AA/v89WAAAAA==";
在接下来的代码中,我们就可以通过supportWebP
变量来获知浏览器对WebP格式的支持与否。