判断浏览器是否支持WebP图片
2018-09-13 本文已影响7人
捷搜索
本文原文来源于自家个人博客站 捷搜索 >> 判断浏览器是否支持WebP图片，
上篇文章“什么是WebP图片？”对WebP图片进行了详细的介绍，并介绍其相对于其他图片格式的优势以及它的兼容性问题，那么，本文为大家讲述下如何考虑兼容性的情况下使用WebP图片。
解决原理
我们需要使用WebP格式的图准备两种格式的图片，一种是原图原格式，另一种是WebP图片。然后我们通过判断浏览器是否支持WebP，如果支持就显示WebP图，如果不支持就显示原图。这样我们就可以很妥善地解决WebP图的兼容性问题，最大限度地做到图片最优化。一来，不会因为我只放WebP图，从而影响不支持WebP的浏览器用户，这样比图片加载慢更可怕；二来，也不会WebP的兼容性问题而放弃使用WebP，这样也就体验不到WebP给我们带来的好处。总之，要恰到好处地使用WebP。
v2-c87bbe995a33807d176f5d0b217146a4_hd.jpg
代码实现
1.宽高判断法
先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持。
var isWebP = false;
var img = new Image();
img.onload = function(){
isWebP = !!(img.height>0 && img.width>0);
checkPic(isWebP);
};
img.onerror = function(){
isWebP = false;
checkPic(isWebP);
};
img.src = './c.webp';
var checkPic = function(isWebP){
$("#pics img").each(function(i,v){
var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
$(v).attr('src',src);
})
}
2.请求头相关字段
通过 Chrome 浏览器开发者工具抓包显示，可以通过查看响应头和请求头相关字段，判断其Accept里是否含有 image/webp 字段，如果包含则说明支持WebP，反之则不支持。
1536290516139014.jpg
var checkWebp = function(){
try{
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
}catch(err) {
return false;
}
}
isWebP = checkWebP() //isWebP为true则支持WebP，若为false则不支持WebP
总结：整体代码
代码里把两种方法都写进去了，实际使用的时候，选择其中一种使用就行了，把另外一个方法代码去掉，切勿同时使用，以免出错。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="pics">
<img src="" pic-src="./c.jpg" webppic-src="./c.webp">
<img src="" pic-src="./c.jpg" webppic-src="./c.webp">
<img src="" pic-src="./c.jpg" webppic-src="./c.webp">
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// 公共方法，操作放原图还是放WebP图
var checkPic = function(isWebP){
$("#pics img").each(function(i,v){
var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
$(v).attr('src',src);
})
}
// 第一种方法
var isWebP = false;
var img = new Image();
img.onload = function(){
isWebP = !!(img.height>0 && img.width>0);
checkPic(isWebP);
};
img.onerror = function(){
isWebP = false;
checkPic(isWebP);
};
img.src = './c.webp';
// 第二种方法
var checkWebp = function(){
try{
return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
}catch(err) {
return false;
}
}
checkPic(checkWebp());
</script>
</body>
</html>
