乐趣区

关于javascript:判断浏览器是否支持webp格式的图片

办法一:通过获取浏览器的 navigator.userAgent 来判断浏览器是否反对 webp 格局的图片;

// 通过获取浏览器的 navigator.userAgent 来判断浏览器是否反对 webp 格局的图片;// 该函数办法的缺点是,如果用户批改了 navigator.userAgent 会导致判断呈现不精确;function browser_check_webp( ) {
    // 获得浏览器的 userAgent 字符串;var userAgent = navigator.userAgent; 
    // 判断是否为 IE 版本小于 11 的浏览器;var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; 
    // 判断是否为 IE11 浏览器;var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE || isIE11) {  
        // IE 浏览器,不反对 webp 格局的图片;return false;
    }else{ 
        // 非 IE 浏览器,反对 webp 格局的图片;return true;
    }
}

办法二:通过浏览器加载一个 WebP 图片,如果能获取到图片的宽度和高度,就阐明是反对 WebP 的,反之则不反对;

参考文档:
判断浏览器是否反对 WebP 图片:https://blog.csdn.net/jesslu/…
判断浏览器是否反对 webp:https://www.cnblogs.com/onthe…
让浏览器反对 Webp:https://segmentfault.com/a/11…
WebPJS – Google’s new image format WebP for not supported browsers (with alpha-channel):http://webpjs.appspot.com/
浏览器反对 webp 格局:应用插件:http://www.etherdream.com/Web…
JavaScript 动静加载脚本和款式 (23):https://www.cnblogs.com/yizih…
让你的页面反对 WebP 图像!:https://blog.csdn.net/u013063…
WebP.js Polyfill:https://github.com/obartra/we…
webp 图片优化:https://www.cnblogs.com/pingf…

// 参数 img_path 为筹备加载的尺寸不为零的 webp 图片的存储门路;function browser_check_webp(img_path) {
    var isWebP = false ;
    var img_checkWebP = new Image();
    img_checkWebP.src = img_path;
    // onload 事件在图片胜利加载实现后立刻执行;img_checkWebP.onload = function(){  
        // 如果能获取到图片的宽度和高度,就阐明是反对浏览器 WebP,反之则不反对。isWebP = !!(img_checkWebP.height>0 && img_checkWebP.width>0) ;   
        if (isWebP) {return true;} else {return false;}
    };
    // 如果浏览器不反对 webp 图片,图片加载失败,那么触发 onerror 办法;img_checkWebP.onerror = function(){return false;};
}

办法三:通过浏览器响应头和申请头,查看其 Accept 里是否含有 image/webp 字段,判断是否反对 WebP 图片格式;

参考文档:
判断浏览器是否反对 WebP 图片:https://blog.csdn.net/jesslu/…
判断浏览器是否反对 webp:https://www.cnblogs.com/onthe…
让浏览器反对 Webp:https://segmentfault.com/a/11…
WebPJS – Google’s new image format WebP for not supported browsers (with alpha-channel):http://webpjs.appspot.com/
浏览器反对 webp 格局:应用插件:http://www.etherdream.com/Web…
JavaScript 动静加载脚本和款式 (23):https://www.cnblogs.com/yizih…
让你的页面反对 WebP 图像!:https://blog.csdn.net/u013063…
WebP.js Polyfill:https://github.com/obartra/we…
webp 图片优化:https://www.cnblogs.com/pingf…

// 通过 Chrome 浏览器开发者工具抓包显示,能够通过查看响应头和申请头相干字段;// 判断其 Accept 里是否含有 image/webp 字段,如果蕴含则阐明反对 WebP,反之则不反对。// 函数返回 true 或 false;true 为反对,false 不反对;function browser_check_webp( ) {
    try{// !![].map 次要是判断浏览器是否为 IE9+,免得 toDataURL 办法会挂掉;// 如果你间接对数组原型扩大了 map 办法,则须要应用 !![].map 以外的办法进行判断,例如  !!window.addEventListener 等;return (!![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0 );
    }catch(err) {return  false;}
}

总结

理论应用的时候,倡议只抉择其中一种办法应用就行了,以防止多种办法独特应用导致可能呈现未知出错。

退出移动版