JS/CSS 延迟加载脚本

时间：2011-04-30 来源：阿点

来源：http://www.cnblogs.com/snandy/archive/2011/04/30/2033272.html

随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。

先给出使用接口

LazyLoad.js(
    urls  // js文件路径
    fn    // 全部加载后回调函数
    scope // 指定回调函数执行上下文
);

示例

LazyLoad.js(['a.js','b.js','c.js'], function(){
    alert('加载完毕');
});

这个系统会尽全力去加载所有的JS文件，即当某个文件不存在或加载失败它不会就此中断，仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。

上一篇完成的JS的按需加载，这篇添加个新方法css，完成对CSS文件的加载。接口与JS相同，示例如下

LazyLoad.css(['a.css', 'b.css', 'c.css'], function(){
    console.log('css模块加载完毕');
});

上一篇对JS的加载实现是通过script元素，css则是通过link元素。而link元素仅IE6/7/8/9和Opera中支持其onreadystatechange事件，Firefox/Safari/Chrome既不支持onreadystatechange，也不支持onload。这里取了一个巧使用setTimeout延迟加载。

完整代码

LazyLoad = function(win){
    var list1,
        list2,
        isIE = /*@cc_on!@*/!1,
        doc = win.document,
        head = doc.getElementsByTagName('head')[0];

    function createEl(type, attrs){
        var el = doc.createElement(type),
            attr;
        for(attr in attrs){
            el.setAttribute(attr, attrs[attr]);
        }
        return el;
    }
    function jsDone(obj){
        list1.shift();
        if(!list1.length){
            obj.fn.call(obj.scope);
        }
    }
    function cssDone(obj){
        list2.shift();
        if(!list2.length){
            obj.fn.call(obj.scope);
        }        
    }
    function js(urls, fn, scope){
        var obj = {
            scope : scope || win,
            fn : fn
        };
        list1 = [].concat(urls);
        for(var i=0,len=urls.length; i<len; i++){
            var script = createEl('script', {src: urls[i]});
            if(isIE){
                script.onreadystatechange = function(){
                    var readyState = this.readyState;
                    if (readyState == 'loaded' || readyState == 'complete'){
                        this.onreadystatechange = null;
                        jsDone(obj);
                    }
                }
            }else{
                script.onload = script.onerror = function(){
                    jsDone(obj);
                }
            }
            head.appendChild(script);
        }
    }
    function css(urls, fn, scope){
        var obj = {
            scope : scope || win,
            fn : fn
        };
        list2 = [].concat(urls);
        for(var i=0,len=urls.length; i<len; i++){
            var link = createEl('link', {
                href : urls[i],
                rel  : 'stylesheet',
                type : 'text/css'
            });
            if(isIE){
                link.onreadystatechange = function(){
                    var readyState = this.readyState;
                    if (readyState == 'loaded' || readyState == 'complete'){
                        this.onreadystatechange = null;
                        cssDone(obj);
                    }
                }
            }else{
                setTimeout(function (){
                    cssDone(obj); 
                },50*len);
            }
            head.appendChild(link);
        }
    }
    return {
        js : js,
        css : css
    };
}(this);

文件下载：http://files.cnblogs.com/snandy/LazyLoad_0.2.js