브 라 우 저가 웹 p 형식 그림 을 지원 하 는 지 판단 합 니 다.

949 단어 jsscss
브 라 우 저가 웹 p 형식의 그림 을 지원 하 는 지 판단 합 니 다.
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)

좋은 웹페이지 즐겨찾기