问题来由:
我是在使用avif格式图片在edge浏览器上显示不出来,出现兼容性问题,因此尝试解决.
第一种:
img标签中srcset属性
<img src="original.avif" srcset="alternative.webp" alt="">
img标签的srcset属性可以用于根据浏览器的宽、高和像素密度来加载相应的图片资源。响应式图片加载方式.
实测也可以用来作为原始图片加载error时的替代图片加载方案.
缺点:在正常的浏览器中会同时加载获取到两张图片,增加资源耗费,不够环保.
第二种:
用js实现
document.getElementById('img').onerror = function () { this.src = "alternative.webp"; }
引申:
img的srcset属性和sizes属性
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的 srcset 属性。srcset 属性用于设置不同屏幕密度下, img 会自动加载不同的图片。用法如下:
<img src="image-128.png" srcset="image-256.png 2x"/>
使用上面的代码, 就能实现在屏幕密度为 1x 的情况下加载 image-128.png, 屏幕密度为 2x 时加载 image-256.png。按照上面的实现, 不同的屏幕密度都要设置图片地址, 目前的屏幕密度有 1x, 2x, 3x, 4x 四种, 如果每一个图片都设置 4 张图片, 加载就会很慢。所以就有了新的 srcset 标准。代码如下:
<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" sizes="(max-width: 360px) 340px, 128px"/>
其中 srcset 指定图片的地址和对应的图片质量。sizes 用来设置图片的尺寸零界点。对于 srcset 中的 w 单位, 可以理解成图片质量。如果可视区域小于这个质量的值, 就可以使用。浏览器会自动选择一个最小的可用图片。
sizes 语法如下:
sizes="[media query] [length], [media query] [length] ... "
sizes 就是指默认显示 128px, 如果视区宽度大于 360px, 则显示 340px。
原文地址:http://www.cnblogs.com/ericyjchung/p/16850633.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性