判断浏览器是否支持webp格式图片

判断浏览器是否支持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)