[javascript] WebP 지원 감지

나는 이것이 효과가 있다고 생각합니다.

var hasWebP = false;
(function() {
  var img = new Image();
  img.onload = function() {
    hasWebP = !!(img.height > 0 && img.width > 0);
  };
  img.onerror = function() {
    hasWebP = false;
  };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
})();

Firefox와 IE에서는 이미지를 이해할 수없는 경우 “onload”핸들러가 전혀 호출되지 않고 대신 “onerror”가 호출됩니다.

jQuery에 대해서는 언급하지 않았지만 해당 검사의 비동기 특성을 처리하는 방법의 예로서 jQuery “Deferred”객체를 반환 할 수 있습니다.

function hasWebP() {
  var rv = $.Deferred();
  var img = new Image();
  img.onload = function() { rv.resolve(); };
  img.onerror = function() { rv.reject(); };
  img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
  return rv.promise();
}

그런 다음 다음과 같이 작성할 수 있습니다.

hasWebP().then(function() {
  // ... code to take advantage of WebP ...
}, function() {
  // ... code to deal with the lack of WebP ...
});

다음은 jsfiddle 예제입니다.

---

고급 검사기 : http://jsfiddle.net/JMzj2/29/ . 이것은 데이터 URL에서 이미지를로드하고 성공적으로로드되는지 확인합니다. WebP는 이제 무손실 이미지도 지원하므로 현재 브라우저가 손실이있는 WebP 만 지원하는지 또는 무손실 WebP도 지원하는지 확인할 수 있습니다. (참고 : 이는 암시 적으로 데이터 URL 지원도 확인합니다.)

var hasWebP = (function() {
    // some small (2x1 px) test images for each feature
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };

    return function(feature) {
        var deferred = $.Deferred();

        $("<img>").on("load", function() {
            // the images should have these dimensions
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);

        return deferred.promise();
    }
})();

var add = function(msg) {
    $("<p>").text(msg).appendTo("#x");
};

hasWebP().then(function() {
    add("Basic WebP available");
}, function() {
    add("Basic WebP *not* available");
});

hasWebP("lossless").then(function() {
    add("Lossless WebP available");
}, function() {
    add("Lossless WebP *not* available");
});