小白带你探索WebP（下集）

上回说到如何判断浏览器是否支持webp。

可以通过加载一张比较小的webp格式的图来达到目的。

function check_webp_feature(callback) {
        var kTestImages = 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==';
        var img = new Image();
        img.onload = function () {
            var result = (img.width > 0) && (img.height > 0);
            callback(result);
        };
        img.onerror = function () {
            callback(false);
        };
        img.src = "data:image/webp;base64," + kTestImages;
    }

然后在页面解析完的时候，把对应的路径塞到link标签和img标签里面（上一篇已经自定义两个属性data-webpOriginal和data-webpNew分别存放原来的和新建的样式表（图片）地址）

那么问题来了，怎么判断页面解析完成呢？

DOMContentLoaded事件并不是所有浏览器都支持，简单粗暴的方法就是不支持DOMContentLoaded的就直接用onload来代替，但是出来的效果并不是那么的好。后来，参考了jquery源码，使用doScroll方法来检测DOM树是否渲染完成，最后实现代码如下：

function ready(fn){

        if (funs.push(fn) > 1) return;

        if(d.addEventListener) {

            d.addEventListener('DOMContentLoaded', function() {
                //注销事件, 避免反复触发
                d.removeEventListener('DOMContentLoaded',arguments.callee, false);
                fn(); //执行函数
            }, false);

        }else if(d.attachEvent) { 

            //使用doScroll方法来检测DOM树是否渲染完成

            var bTop = false;

            try {
                //处于iframe中，使用doScroll方法并不代表DOM加载完毕
                bTop = window.frameElement == null;
            } catch(e) {

            }
            //用bTop标识是否使用doScroll来触发ready函数
            if ( d.documentElement.doScroll && bTop ) {
                (function(){
                    try{
                        d.documentElement.doScroll('left');
                        fn();
                    }catch(e){
                        setTimeout( arguments.callee, 0 );
                    }
                    
                })();
            }
        }
        
    }

这样就可以在页面解析完后，再把对应的路径塞到link标签和img标签完成任务。

最后，使用npm的publish命令发布插件。https://www.npmjs.com/package/fis-postpackager-jpg-towebp