要在浏览器允许的情况下为背景加载webp图像而不加载png,可以使用以下方法:
function checkWebpSupport(callback) {
var webpImage = new Image();
webpImage.onload = webpImage.onerror = function() {
callback(webpImage.height === 2);
};
webpImage.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bAABIWBAICAAAAAABABgAAQABmcGdtTXU0AACjVAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABMLAAcADsASAAQABkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABUUUAAgADQAuADQAyAAR8AAPAACAAAACAAACEAAADH//w==';
}
checkWebpSupport(function(supported) {
if (supported) {
// 在此加载webp图像
document.body.style.backgroundImage = 'url(/path/to/image.webp)';
} else {
// 在此加载png图像
document.body.style.backgroundImage = 'url(/path/to/image.png)';
}
});
@media (supports: (image/webp)) {
body {
background-image: url(/path/to/image.webp);
}
}
@media not (supports: (image/webp)) {
body {
background-image: url(/path/to/image.png);
}
}
注意:以上代码仅为示例,实际使用时需要替换URL为实际的图像路径。
以上两种方法均可根据浏览器的支持情况来加载相应的图像格式,从而实现在浏览器允许的情况下为背景加载webp图像而不加载png。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云