• 百 度
  • 京 东
  • 淘 宝
  • 知 乎
  • Bing
  • Google
  • Yandex
  • Quora
  • GitHub
  • StackOverflow
  • SegmentFault
  • 医 疗

判断浏览器是否支持webp格式的图片

设计一个函数,用来判断浏览器是否支持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/article/details/82495061
判断浏览器是否支持webp:https://www.cnblogs.com/ontheway1215/p/6951634.html
让浏览器支持Webp:https://segmentfault.com/a/1190000005898538
WebPJS - Google’s new image format WebP for not supported browsers (with alpha-channel):http://webpjs.appspot.com/
浏览器支持webp格式:使用插件:http://www.etherdream.com/WebP/WebP.js
JavaScript动态加载脚本和样式(23):https://www.cnblogs.com/yizihan/p/4386431.html
让你的页面支持WebP图像!:https://blog.csdn.net/u013063153/article/details/52673507
WebP.js Polyfill :https://github.com/obartra/webpjs
webp图片优化:https://www.cnblogs.com/pingfan1990/p/4622822.html

// 参数 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/article/details/82495061
判断浏览器是否支持webp:https://www.cnblogs.com/ontheway1215/p/6951634.html
让浏览器支持Webp:https://segmentfault.com/a/1190000005898538
WebPJS - Google’s new image format WebP for not supported browsers (with alpha-channel):http://webpjs.appspot.com/
浏览器支持webp格式:使用插件:http://www.etherdream.com/WebP/WebP.js
JavaScript动态加载脚本和样式(23):https://www.cnblogs.com/yizihan/p/4386431.html
让你的页面支持WebP图像!:https://blog.csdn.net/u013063153/article/details/52673507
WebP.js Polyfill :https://github.com/obartra/webpjs
webp图片优化:https://www.cnblogs.com/pingfan1990/p/4622822.html

// 通过 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;
    }
}

总结

实际使用的时候,建议只选择其中一种方法使用就行了,以避免多种方法共同使用导致可能出现未知出错。


转载请注明来源。

文章标题:判断浏览器是否支持webp格式的图片

本文作者:bas369.com

发布时间:2020-07-20, 23:08:00

最后更新:2020-07-21, 00:11:27

原始链接:https://www.bas369.com/more/learning_notes/2020/07/20/%E5%88%A4%E6%96%AD%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%90%A6%E6%94%AF%E6%8C%81webp%E6%A0%BC%E5%BC%8F%E7%9A%84%E5%9B%BE%E7%89%87/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。


  • 关于我们
  • 苏公网安备 32132302010228号
  • 联系我们
目录