webp-support.js 1.08 KB
/**
 * 检测浏览器是否支持 webp 图片格式
 */
var checkWebpSupport = function(feature) {
    // iOS APP 拦截网络请求,支持 webp
    if (/yoho/i.test(navigator.userAgent) && /supportWebp/i.test(navigator.userAgent)) {
        window.supportWebp = true;
        return;
    }
    var kTestImages = {
        lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'
    };
    var img = new Image();

    img.onload = function()  {
        var result = (img.width > 0) && (img.height > 0);
        window.supportWebp = result || false;
        var event = document.createEvent('HTMLEvents');
        event.initEvent('supportWebp', true, true);
        document.dispatchEvent(event);
    };
    img.onerror = function() {
        window.supportWebp = false;
        var event = document.createEvent('HTMLEvents');
        event.initEvent('supportWebp', true, true);
        document.dispatchEvent(event);
    };
    // 一张支持alpha透明度的webp的图片,使用base64编码
    img.src = 'data:image/webp;base64,' + kTestImages[feature];
};

checkWebpSupport('lossy');