本文原文來(lái)源于自家個(gè)人博客站 捷搜索 >> 判斷瀏覽器是否支持WebP圖片，
上篇文章“什么是WebP圖片？”對(duì)WebP圖片進(jìn)行了詳細(xì)的介紹，并介紹其相對(duì)于其他圖片格式的優(yōu)勢(shì)以及它的兼容性問(wèn)題，那么，本文為大家講述下如何考慮兼容性的情況下使用WebP圖片。
解決原理
我們需要使用WebP格式的圖準(zhǔn)備兩種格式的圖片，一種是原圖原格式，另一種是WebP圖片。然后我們通過(guò)判斷瀏覽器是否支持WebP，如果支持就顯示WebP圖，如果不支持就顯示原圖。這樣我們就可以很妥善地解決WebP圖的兼容性問(wèn)題，最大限度地做到圖片最優(yōu)化。一來(lái)，不會(huì)因?yàn)槲抑环臰ebP圖，從而影響不支持WebP的瀏覽器用戶，這樣比圖片加載慢更可怕；二來(lái)，也不會(huì)WebP的兼容性問(wèn)題而放棄使用WebP，這樣也就體驗(yàn)不到WebP給我們帶來(lái)的好處?？傊〉胶锰幍厥褂肳ebP。
代碼實(shí)現(xiàn)
1.寬高判斷法
先加載一個(gè)WebP圖片，如果能獲取到圖片的寬度和高度，就說(shuō)明是支持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.請(qǐng)求頭相關(guān)字段
通過(guò) Chrome 瀏覽器開(kāi)發(fā)者工具抓包顯示，可以通過(guò)查看響應(yīng)頭和請(qǐng)求頭相關(guān)字段，判斷其Accept里是否含有 image/webp 字段，如果包含則說(shuō)明支持WebP，反之則不支持。
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
總結(jié)：整體代碼
代碼里把兩種方法都寫進(jìn)去了，實(shí)際使用的時(shí)候，選擇其中一種使用就行了，把另外一個(gè)方法代碼去掉，切勿同時(shí)使用，以免出錯(cuò)。
<!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>
