这种图片其实是做了降级处理如果说 支持webp就使用， 如果不支持的话就使用jpg
为什么要做图片降级
图片的格式有很多 jpeg png webp等,我们经常使用webp格式的图片,因为webp格式的图片拥有无损压缩和有损压缩两种模式而且压缩率更高等优点。但是webp格式的图片同样也有缺点，ios webview和IE不支持webp。所以我们要检测浏览器是否支持webp格式的图片,如果不支持webp则展示图片的其它格式。
降级方案
<div class="box">
<img alt="">
</div>
function isSupportWebp(cb) {
let img = new Image();
img.src = webpPath;
img.onload = function() {
cb(true);
}
img.onerror = function() {//浏览器不支持该图片格式时会触发
cb(false);
}
}
function LoadImg() {
let img = document.getElementsByTagName('img')[0];
isSupportWebp(function(isSupport) {
if(isSupport) {
img.src = webpPath;
} else {
let index = webpPath.indexOf('_.webp');
if(index!=-1) {
webpPath = webpPath.slice(0,index);
}
img.src = webpPath;
}
});
}
<body>
<div class="box">
<img alt="">
</div>
<script>
let webpPath = './img/O1CN01xYaPxM1CgQAujTNvy_!!0-saturn_solar.jpg_220x220.jpg_.webp';
function isSupportWebp(cb) {
let img = new Image();
img.src = webpPath;
img.onload = function() {
cb(true);
}
img.onerror = function() {
cb(false);
}
}
function LoadImg() {
let img = document.getElementsByTagName('img')[0];
isSupportWebp(function(isSupport) {
if(isSupport) {
img.src = webpPath;
} else {
let index = webpPath.indexOf('_.webp');
if(index!=-1) {
webpPath = webpPath.slice(0,index);
}
img.src = webpPath;
}
});
}
LoadImg();
</script>
</body>
总结
前端性能优化永远是一个永无止境的话题， 还是需要结合项目具体问题具体分析。
文章来源于前端图形 ，作者前端图形Fly
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！