Saya pikir sesuatu seperti ini mungkin berhasil:
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';
})();
Di Firefox dan IE, penangan "onload" tidak akan dipanggil sama sekali jika gambar tidak dapat dipahami, dan "onerror" yang dipanggil.
Anda tidak menyebutkan jQuery, tetapi sebagai contoh cara menangani sifat asinkron dari pemeriksaan tersebut, Anda dapat mengembalikan objek 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();
}
Kemudian Anda bisa menulis:
hasWebP().then(function() {
}, function() {
});
Berikut adalah contoh jsfiddle.
Pemeriksa yang lebih canggih: http://jsfiddle.net/JMzj2/29/ . Yang ini memuat gambar dari URL data dan memeriksa apakah berhasil memuat. Karena WebP sekarang juga mendukung gambar lossless, Anda dapat memeriksa apakah browser saat ini hanya mendukung WebP lossy atau juga WebP lossless. (Catatan: Ini secara implisit juga memeriksa dukungan URL data.)
var hasWebP = (function() {
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() {
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");
});