-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy path判断浏览器是否支持-webp-的几种解决方法.html
1 lines (1 loc) · 36.6 KB
/
判断浏览器是否支持-webp-的几种解决方法.html
1
<!doctype html><html class="theme-next mist"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="google-site-verification" content="PBwskePkFkRAnqisXEBN7FyYihV0DkOHyvEC2eDt6Gg"><meta name="referrer" content="never"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="baidu-site-verification" content="haLEFmuOYV"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"0f81ff2f"}),daovoice("update")</script><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css"><meta name="keywords" content="兼容"><link rel="alternate" href="/atom.xml" title="Moorez" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.0.2"><meta name="description" content="我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其兼容性不是很好，如下：因此我们需要做一些兼容处理，那么如何判断浏览器支持 webp 呢？下面有几种方法可供参考。"><meta name="keywords" content="兼容"><meta property="og:type" content="article"><meta property="og:title" content="判断浏览器是否支持 webp 的几种解决方法"><meta property="og:url" content="http://www.shenzekun.cn/判断浏览器是否支持-webp-的几种解决方法.html"><meta property="og:site_name" content="Moorez"><meta property="og:description" content="我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其兼容性不是很好，如下：因此我们需要做一些兼容处理，那么如何判断浏览器支持 webp 呢？下面有几种方法可供参考。"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-c11554a7e34e2e15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-3125077e103aebff.png&originHeight=178&originWidth=1190&size=48391&status=done&width=595?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-9729ceec28fe7a61.png&originHeight=236&originWidth=2530&size=116511&status=done&width=1265?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-56755fe184d5f265.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-5b6d8cdf3623e0dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-67d9dd37b5142e24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-ebb41ccb4555c6f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="https://upload-images.jianshu.io/upload_images/5308475-409f2cf13aedf777.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:updated_time" content="2019-06-01T07:22:58.811Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="判断浏览器是否支持 webp 的几种解决方法"><meta name="twitter:description" content="我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其兼容性不是很好，如下：因此我们需要做一些兼容处理，那么如何判断浏览器支持 webp 呢？下面有几种方法可供参考。"><meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/5308475-c11554a7e34e2e15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Mist",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!1,duoshuo:{userId:"0",author:"Author"}}</script><link rel="canonical" href="http://www.shenzekun.cn/判断浏览器是否支持-webp-的几种解决方法.html"><title>判断浏览器是否支持 webp 的几种解决方法 | Moorez</title></head><body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/shenzekun" class="github-corner" aria-label="View source on Github"><svg width="92" height="92" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="//schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Moorez</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div><span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://www.shenzekun.cn/判断浏览器是否支持-webp-的几种解决方法.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="shenzekun"><meta itemprop="description" content=""><meta itemprop="image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Moorez"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">判断浏览器是否支持 webp 的几种解决方法</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2019-06-01T15:21:16+08:00" content="2019-06-01">2019-06-01</time></span> <span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span></span> <span id="/判断浏览器是否支持-webp-的几种解决方法.html" class="leancloud_visitors" data-flag-title="判断浏览器是否支持 webp 的几种解决方法"> | <span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">热度</span><span class="leancloud-visitors-count"></span> <span>℃</span></span><div class="post-wordcount"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> <span class="post-meta-item-text">字数统计</span> <span title="字数统计">710 字</span> <span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span> <span class="post-meta-item-text">阅读时长</span> <span title="阅读时长">3 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><hr><blockquote><p>我们都知道，WebP 是 Google 推出的 WebP 图片格式，它是一种支持有损压缩和无损压缩的图片文件格式，根据Google测试，相同的图片，WebP 格式的图片均能比 PNG，JPG 格式的图片节约不少体积，但是其兼容性不是很好，如下：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-c11554a7e34e2e15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""><br>因此我们需要做一些兼容处理，那么如何判断浏览器支持 webp 呢？下面有几种方法可供参考。</p></blockquote><a id="more"></a><h3 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h3><p><strong>使用 canvas 的 toDataURL 进行判断</strong></p><p>toDataURL方法在MDN解释如下：</p><blockquote><p>HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。</p></blockquote><ul><li>如果画布的高度或宽度是0，那么会返回字符串“data:,”。</li><li>如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。</li><li>Chrome支持“image/webp”类型。</li></ul><p>toDataURL方法将图片转化为包含dataURI的DOMString，通过 base64 编码前面的图片类型值是image/webp进行判断。</p><p>比如在谷歌浏览器使用toDataURL方法转成image/webp：</p><p><img src="https://upload-images.jianshu.io/upload_images/5308475-3125077e103aebff.png&originHeight=178&originWidth=1190&size=48391&status=done&width=595?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>在 Safari 浏览器使用toDataURL方法转成image/webp：</p><p><img src="https://upload-images.jianshu.io/upload_images/5308475-9729ceec28fe7a61.png&originHeight=236&originWidth=2530&size=116511&status=done&width=1265?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>可以发现在不支持 webp 的浏览器进行toDataURL，得到的图片类型并不是 webp，因此我们可以通过这个进行判断。</p><p>实现方法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> isSupportWebp = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">try</span> {</div><div class="line"> <span class="keyword">return</span> <span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>).toDataURL(<span class="string">'image/webp'</span>, <span class="number">0.5</span>).indexOf(<span class="string">'data:image/webp'</span>) === <span class="number">0</span>;</div><div class="line"> } <span class="keyword">catch</span>(err) {</div><div class="line"> <span class="keyword">return</span> <span class="literal">false</span>;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">isSupportWebp()</div></pre></td></tr></table></figure><h3 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h3><p><strong>在服务端根据请求header信息判断浏览器是否支持webp</strong></p><p>谷歌浏览器上请求图片 header是这样的：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-56755fe184d5f265.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>IE 浏览器请求图片 header是这样的：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-5b6d8cdf3623e0dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>在图片请求发出的时候，Request Headers 里有 Accept，服务端可以根据Accept 里面是否有 image/webp 进行判断。</p><h3 id="方法三"><a href="#方法三" class="headerlink" title="方法三"></a>方法三</h3><p><strong>通过加载一张 webp 图片进行判断</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> supportsWebp = <span class="function">(<span class="params">{ createImageBitmap, Image }</span>) =></span> {</div><div class="line"> <span class="keyword">if</span> (!createImageBitmap || !Image) <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(<span class="literal">false</span>);</div><div class="line"></div><div class="line"> <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="params">resolve</span> =></span> {</div><div class="line"> <span class="keyword">const</span> image = <span class="keyword">new</span> Image();</div><div class="line"> image.onload = <span class="function"><span class="params">()</span> =></span> {</div><div class="line"> createImageBitmap(image)</div><div class="line"> .then(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> resolve(<span class="literal">true</span>);</div><div class="line"> })</div><div class="line"> .catch(<span class="function"><span class="params">()</span> =></span> {</div><div class="line"> resolve(<span class="literal">false</span>);</div><div class="line"> });</div><div class="line"> };</div><div class="line"> image.onerror = <span class="function"><span class="params">()</span> =></span> {</div><div class="line"> resolve(<span class="literal">false</span>);</div><div class="line"> };</div><div class="line"> image.src = <span class="string">'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA='</span>;</div><div class="line"> });</div><div class="line">};</div><div class="line"></div><div class="line"><span class="keyword">const</span> webpIsSupported = <span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">let</span> memo = <span class="literal">null</span>;</div><div class="line"> <span class="keyword">return</span> <span class="function"><span class="params">()</span> =></span> {</div><div class="line"> <span class="keyword">if</span> (!memo) {</div><div class="line"> memo = supportsWebp(<span class="built_in">window</span>);</div><div class="line"> }</div><div class="line"> <span class="keyword">return</span> memo;</div><div class="line"> };</div><div class="line">};</div><div class="line"></div><div class="line">webpIsSupported()().then(<span class="function"><span class="params">res</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"是否支持 webp"</span>, res)</div><div class="line">}).catch(<span class="function"><span class="params">err</span> =></span> {</div><div class="line"> <span class="built_in">console</span>.log(err)</div><div class="line">})</div></pre></td></tr></table></figure><p>此方法会加载一张 1x1 的白色的正方形背景图，用来测试浏览器是否支持 webp。</p><p>在 Google 测试代码：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-67d9dd37b5142e24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>在 Firefox 测试代码：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-ebb41ccb4555c6f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>在 Safari 测试代码：<br><img src="https://upload-images.jianshu.io/upload_images/5308475-409f2cf13aedf777.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt=""></p><p>Google官方文档是这样处理的（先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持）：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">check_webp_feature</span>(<span class="params">feature, callback</span>) </span>{</div><div class="line"> <span class="keyword">var</span> kTestImages = {</div><div class="line"> <span class="attr">lossy</span>: <span class="string">"UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"</span>,</div><div class="line"> <span class="attr">lossless</span>: <span class="string">"UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=="</span>,</div><div class="line"> <span class="attr">alpha</span>: <span class="string">"UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA=="</span>,</div><div class="line"> <span class="attr">animation</span>: <span class="string">"UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"</span></div><div class="line"> };</div><div class="line"> <span class="keyword">var</span> img = <span class="keyword">new</span> Image();</div><div class="line"> img.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> result = (img.width > <span class="number">0</span>) && (img.height > <span class="number">0</span>);</div><div class="line"> callback(feature, result);</div><div class="line"> };</div><div class="line"> img.onerror = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</div><div class="line"> callback(feature, <span class="literal">false</span>);</div><div class="line"> };</div><div class="line"> img.src = <span class="string">"data:image/webp;base64,"</span> + kTestImages[feature];</div><div class="line">}</div></pre></td></tr></table></figure><h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL" target="_blank" rel="external">HTMLCanvasElement.toDataURL()</a></li><li><a href="https://davidwalsh.name/detect-webp" target="_blank" rel="external">Detect WEBP Support with JavaScript</a></li><li><a href="http://web.jobbole.com/87103/" target="_blank" rel="external">探究WebP一些事儿</a></li></ul></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></div></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/判断浏览器是否支持-webp-的几种解决方法.html">判断浏览器是否支持 webp 的几种解决方法</a></p><p><span>文章作者:</span><a href="/" title="访问 shenzekun 的个人博客">shenzekun</a></p><p><span>发布时间:</span>2019年06月01日 - 15:21</p><p><span>最后更新:</span>2019年06月01日 - 15:22</p><p><span>原始链接:</span><a href="/判断浏览器是否支持-webp-的几种解决方法.html" title="判断浏览器是否支持 webp 的几种解决方法">http://www.shenzekun.cn/判断浏览器是否支持-webp-的几种解决方法.html</a><span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://www.shenzekun.cn/判断浏览器是否支持-webp-的几种解决方法.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>您的支持将鼓励我继续创作！</div><button id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'><span>赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/image/wechat-reward-image.png" alt="shenzekun WeChat Pay"><p>微信打赏</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/js/" rel="tag"><i class="fa fa-tag"></i>js</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/JavaScript中的Object-freeze与const之间的区别-译.html" rel="next" title="JavaScript中的Object.freeze与const之间的区别(译)"><i class="fa fa-chevron-left"></i> JavaScript中的Object.freeze与const之间的区别(译)</a></div><div class="post-nav-prev post-nav-item"><a href="/页面CPU和内存占用监控可视化Chrome插件-Graph-Process.html" rel="prev" title="页面CPU和内存占用监控可视化Chrome插件-Graph Process">页面CPU和内存占用监控可视化Chrome插件-Graph Process<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"></div></div></div><div class="comments" id="comments"><div id="lv-container" data-id="city" data-uid="MTAyMC8yODgyMi81Mzky"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview">站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person"><img class="site-author-image" itemprop="image" src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg" alt="shenzekun"><p class="site-author-name" itemprop="name">shenzekun</p><p class="site-description motion-element" itemprop="description">Road endless its long and far, I will seek up and down！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">39</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">6</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">19</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/shenzekun" target="_blank" rel="external nofollow" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://www.jianshu.com/u/b473784d730c" target="_blank" rel="external nofollow" title="简书"><i class="fa fa-fw fa-heartbeat"></i> 简书</a></span><span class="links-of-author-item"><a href="https://twitter.com/shenzekun" target="_blank" rel="external nofollow" title="Twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a></span><span class="links-of-author-item"><a href="https://segmentfault.com/u/juli_590dd17068b9e" target="_blank" rel="external nofollow" title="SegmentFault"><i class="fa fa-fw fa-meh-o"></i> SegmentFault</a></span><span class="links-of-author-item"><a href="http://blog.csdn.net/qq_33699981?viewmode=list" target="_blank" rel="external nofollow" title="csdn"><i class="fa fa-fw fa-crosshairs"></i> csdn</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/5866ed77ac502e00612f1949" target="_blank" rel="external nofollow" title="掘金"><i class="fa fa-fw fa-spinner"></i> 掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a></li><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a></li><li class="links-of-blogroll-item"><a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a></li><li class="links-of-blogroll-item"><a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a></li><li class="links-of-blogroll-item"><a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a></li></ul></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#方法一"><span class="nav-number">1.</span> <span class="nav-text">方法一</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法二"><span class="nav-number">2.</span> <span class="nav-text">方法二</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法三"><span class="nav-number">3.</span> <span class="nav-text">方法三</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参考"><span class="nav-number">4.</span> <span class="nav-text">参考</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">shenzekun</span></div><div class="theme-info"><i class="fa fa-pencil"></i> <span class="post-count">博客全站共 40.7k 字</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script><script type="text/javascript">!function(e,t){var n,c=e.getElementsByTagName(t)[0];"function"!=typeof LivereTower&&((n=e.createElement(t)).src="https://cdn-city.livere.com/js/embed.dist.js",n.async=!0,c.parentNode.insertBefore(n,c))}(document,"script")</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),n=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!1,n=r.title.trim().toLowerCase(),s=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=decodeURIComponent(r.url),i=-1,l=-1,p=-1;if(""!=n&&a.forEach(function(e,t){i=n.indexOf(e),l=s.indexOf(e),(i>=0||l>=0)&&(c=!0,0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+n+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;u<0&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),n.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").click(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script><script>AV.initialize("Cc9hxvKgB63w6aMIIBCV2Bfz-gzGzoHsz","mBmolCuukl1GN11A7m8VQj9f")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){if(0!==e.length){for(c=0;c<e.length;c++){var t=e[c],i=t.get("url"),s=t.get("time"),l=document.getElementById(i);$(l).find(".leancloud-visitors-count").text(s)}for(var c=0;c<n.length;c++){var i=n[c],l=document.getElementById(i),r=$(l).find(".leancloud-visitors-count");""==r.text()&&r.text(0)}}else o.find(".leancloud-visitors-count").text(0)}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var s=new e,l=new AV.ACL;l.setPublicReadAccess(!0),l.setPublicWriteAccess(!0),s.setACL(l),s.set("title",o),s.set("url",n),s.set("time",1),s.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script></body></html>