做有态度的前端团队

网易FEG前端团队

小白带你探索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

请输入图片描述

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif