webp图片对各种浏览器的兼容问题，有没支持webp兼容的Js懒加载？

Question

主要是针对各种浏览器的兼容，可以支持webp的浏览器，懒加载就加载webp文件，否则加载Jpg等？

Answer 1

目前我们的做法是默认使用旧的图片格式，然后由客户端自行实现检测是否支持 WebP ，后将结果放到 Cookie 里面，在后端返回图片地址的时候就直接根据 Cookie 里面的值来决定是返回 WebP 还是其他旧的格式。

这样对于前端的懒加载就不用过多的修改。

Answer 2

可以通过手动加载一张 WebP 图片判断：

function isWebPSupported() {
  const img = new Image();
  img.onload = function() {
    console.log('支持 WebP');
    return true;
  };
  img.onerror = function() {
    console.log('不支持 WebP 格式，加载 jpg');
    return false;
  };
}

懒加载也是一样的，在执行期间调用上面的函数判断就行了：

<img 
    class="lazy" 
    data-src="webp图片路径" 
    data-src-jpg="jpg图片路径" 
    src="可以为空，也可以放一个预览图" 
    alt="懒加载图片" />

function lazyLoad() {
  const lazyImages = document.querySelectorAll('.lazy');
  // 获取浏览器支持情况
  const supportStatus = isWebPSupported();
  
  lazyImages.forEach(function(img) {
    const rect = img.getBoundingClientRect();
    
    if (rect.top < window.innerHeight && rect.bottom >= 0) {
      // 判断浏览器是否支持webp格式
      if (supportStatus) {
        const srcWebp = img.getAttribute('data-src');
        if (srcWebp) {
          img.src = srcWebp;
          img.removeAttribute('data-src');
        }
      } else {
        const srcJpg = img.getAttribute('data-src-jpg');
        if (srcJpg) {
          img.src = srcJpg;
          img.removeAttribute('data-src-jpg');
        }
      }
      
      img.classList.remove('lazy');
    }
  });
}

// 监听滚动事件
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);

// 页面初次加载执行一次
lazyLoad();

Answer 3

https://help.upyun.com/knowledge-base/cdn-auto-webp/

通过 HTTP Accept 头来判断的，如果支持，则返回 WebP 副本并进行缓存；如果不支持，则返回原图。以 Chrome 浏览器为例：

accept:image/webp,image/apng,image/*,*/*;q=0.8
如上列表可以看出，当 Accept 请求头里面如果有 image/webp 字段，则说明客户端支持 WebP 解码。

Answer 4

你要兼容多老旧的浏览器啊

https://caniuse.com/?search=webp