webp格式图片兼容性支持js实现

代码实现

html中img标签的写法如下，增加classwebp,属性src替换为data-src。 js代码检测到img有webp这个class，就会优先把data-src属性中的值转为webp对应的请求，如果webp图片请求失败，就加载原图。

<img data-src="xx.jpg" class="webp" />

// js工具函数
window.webpUtils = {
    setCookie: function(name, value, Days) {
        Days = Days ? Days : 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ';path=/';
    },
    getCookie: function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if(arr != null) return unescape(arr[2]);
        return null;
    },
    set: function(name, value) {
        if(window.localStorage) {
            localStorage.setItem(name, value);
        } else {
            this.setCookie(name, value);
        }
    },
    get: function(name) {
        if(window.localStorage) {
            return localStorage.getItem(name);
        } else {
            return this.getCookie(name);
        }
    }
};

// 处理函数，ajax加载的图片，需要重新调用该函数
function webp_handle() {
    var webp_flag = webpUtils.get('webp_flag');
    if(webp_flag == 1) {
        //错误处理，若webp图片不存在，加载默认图片
        $('img.webp').on('error', function(){
            $(this).attr('src', $(this).data('src'));
        });

        // webp图片加载
        $('img.webp').each(function(k, obj) {
            if($(obj).attr('src')) {
                return true; //continue
            }
            var url = $(obj).data('src');
            if(!url) {
                return true; //continue
            }
            url = url.substr(0, url.lastIndexOf('.')) + '.webp';
            $(obj).attr('src', url);
        });
    } else {
        // 浏览器不支持 webp时，加载原图片
        $('img.webp').each(function(k, obj) {
            if($(obj).attr('src')) {
                return true; //continue
            }
            var url = $(obj).data('src');
            $(obj).attr('src', url);
        });
    }
}

$(function(){
    // 初始化， 判断浏览器是否支持webp
    var webp_flag = webpUtils.get('webp_flag');
    if(!webp_flag) {
        var image = new Image();
        // 图片加载完成时候的操作
        image.onload = function() {
            // 图片加载成功且宽度为1，那么就代表支持webp了，因为这张base64图是webp格式。如果不支持会触发image.error方法
            if(image.width == 1) {
                webp_flag = 1;
            } else {
                webp_flag = 2;
            }
            webpUtils.set('webp_flag', webp_flag);
            webp_handle();
        };

        image.onerror = function() {
            webp_flag = 2;
            webpUtils.set('webp_flag', webp_flag);
            webp_handle();
        };

        // 一张支持alpha透明度的webp的图片，使用base64编码
        image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
    } else {
        webp_handle();
    }
});