当前位置: 首页 > 知识库问答 >
问题:

javascript - webp图片对各种浏览器的兼容问题,有没支持webp兼容的Js懒加载?

姬成荫
2023-07-30

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

共有2个答案

关昊天
2023-07-30

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

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

甘祺
2023-07-30

可以通过手动加载一张 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();
 类似资料:
  • 我们在div里放一个img,发现: 在html和html5中,div的长宽是不同的,后者的高度要超过几个像素。 比如说,下面这个是html的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">

  • 浏览器兼容 主流浏览器都兼容 HTML5 的新标签,对于 IE8 及以下版本不认识 HTML5的新元素,可以使用 JavaScript 创建一个没用的元素来解决,例如: <script> document.createElement("header"); </script> 也可以使用 shiv 来解决兼容性问题,详情可参考 HTML5 Shiv

  • 问题内容: 我的页面宽50/50。左半部分具有六个div的行。条件: 6个正方形必须始终保持正方形。 前5个正方形应在右边留有边距/填充以进行分隔。 所有六个正方形必须保持同一行。如果我可以使它正常工作,那么我可以对较小的视口中的响应度进行必要的调整。 跨浏览器兼容最新版本的chrome和firefox。 L1 L2 L3 L4 L5 L6 问题答案: The main trick here is

  • 本文向大家介绍JS 实现 ajax 异步浏览器兼容问题,包括了JS 实现 ajax 异步浏览器兼容问题的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上所述是小编给大家介绍的JS 实现 ajax 异步浏览器兼容问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍js图片上传前预览功能(兼容所有浏览器),包括了js图片上传前预览功能(兼容所有浏览器)的使用技巧和注意事项,需要的朋友参考一下 网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) 实现要点 ● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。  ● 对于 IE6~9 使用滤镜 filter:progid

  • 本文向大家介绍JS兼容所有浏览器的DOMContentLoaded事件,包括了JS兼容所有浏览器的DOMContentLoaded事件的使用技巧和注意事项,需要的朋友参考一下 使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中,但window.onload事件在某些开始后可能会影响客户体验,因为要等待所有