javascript - 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();