判断浏览器是否支持webp格式的图片
js
(function(doc, _this) {
// 给html根节点加上webps类名
function addRootTag() {
doc.documentElement.className += " webpa";
}
var image = new Image();
// 图片加载完成时候的操作
image.onload = function() {
// 图片加载成功且宽度为1,那么就代表支持webp了,因为这张base64图是webp格式。如果不支持会触发image.error方法
if (image.width == 1) {
addRootTag();
} else {
_this.setIsWebp('')
}
};
// 一张支持alpha透明度的webp的图片,使用base64编码
image.src = "data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==";
})(document);
scss
封装:
@mixin bg($bgurl) {
background-image: url($bgurl);
@at-root .webpa & {
background-image: url($bgurl + '.webp');
}
}
引用:
之前: background-image: url(xxx)
现在:@include bg(xxx)