webp實踐的javascript檢測方案

function hasWebp () {
    // 查看Cookie，若是沒有則進行如下邏輯
    var img = new Image();
    img.onload = handleSupport;
    img.onerror = handleNotSupport;
    img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQABABwlpAADcAD+/gbQAA==';
    // 不然根據Cookie執行handleSupport或者handleNotSupport
}
function handleSupport() {
    setCookie('swebp', 'true', 2592000); // 30天過時
}
function handleNotSupport () {
    setCookie('swebp', 'false', 2592000);
}

　　

下面是 localStorage版本

function detectWebp () {
    if (!window.localStorage || typeof localStorage !== 'object') return;

    var name = 'webpa'; // webp available
    if (!localStorage.getItem(name) || (localStorage.getItem(name) !== 'available' && localStorage.getItem(name) !== 'disable')) {

        var img = document.createElement('img');

        img.onload = function () {
            try {
                localStorage.setItem(name, 'available');
            } catch (ex) {
            }
        };

        img.onerror = function () {
        try {
                localStorage.setItem(name, 'disable');
            } catch (ex) {
            }
        };
        img.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAsAAAABBxAREYiI/gcAAABWUDggGAAAADABAJ0BKgEAAQABABwlpAADcAD+/gbQAA==';
    }
}