异步脚本加载 JS Loader

tomjamescn 发表于 2011-12-21 08:44

偷懒，将别人的东西直接贴过来吧，文章来自<a style="color:#0000ff;text-decoration:underline" href="http://foxling.org/js-ajax-dom/async-loading-js/">http://foxling.org/js-ajax-dom/async-loading-js/</a> ---------------------------分割线 JS会阻塞其它页面资源的下载，通过对JS的异步加载可以解决这个问题，加快页面内容的呈现速度。获得更好的体验。
使用script标签加载
通过firebug查看各种资源加载状态，当test.js下载完毕后，图片才开始下载。 通过firebug查看各种资源加载状态，当test.js下载完毕后，图片才开始下载。 
<a href="http://blog.chinaunix.net/attachment/201105/11/13687198_1305080406UFF5.png" target="_blank"><img src="http://blog.chinaunix.net/attachment/201105/11/13687198_1305080406UFF5.png" .load="imgResize(this, 650);" ;="" border="0"></a> 
<a href="http://foxling.org/examples/2010/06/js-loader/block.html" target="_blank" target="_blank">猛击测试页面block.html</a>
使用<a name="baidusnap2"></a>JSLoader异步加载JS
当使用异步加载方式加载JS时，test.js与图片同时加载，加快了页面的呈现： 
<a href="http://blog.chinaunix.net/attachment/201105/11/13687198_1305080418pAmP.png" target="_blank"><img src="http://blog.chinaunix.net/attachment/201105/11/13687198_1305080418pAmP.png" .load="imgResize(this, 650);" ;="" border="0"></a> 
<a href="http://foxling.org/examples/2010/06/js-loader/" target="_blank" target="_blank">猛击测试页面js-loader</a>
JSLoader
JSLoader.load(url, , ); 
参数： 
url 要加载的JS的地址 
fun 依赖该JS执行的函数
使用示例：<div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>JSLoader.load('test.js', function(){ </li><li>
    document.getElementById('test').innerHTML = test; </li><li>
});
</li></ol></div>
<a href="http://foxling.org/examples/2010/06/js-loader/jsloader.js" target="_blank" target="_blank">猛击这里下载JSLoader.js</a>

JSLoader源码：
<div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>var JSLoader = function(){ </li><li>
 </li><li>
    var scripts = {}; </li><li>
 </li><li>
    function getScript(url){ </li><li>
        var script = scripts[url]; </li><li>
        if (!script){ </li><li>
            script = {loaded:false, funs:[]}; </li><li>
            scripts[url] = script; </li><li>
            add(script, url); </li><li>
        } </li><li>
        return script; </li><li>
    } </li><li>
 </li><li>
    function run(script){ </li><li>
        var funs = script.funs, </li><li>
            len = funs.length, </li><li>
            i = 0; </li><li>
 </li><li>
        for (; i < len; i++){ </li><li>
            var fun = funs.pop(); </li><li>
            fun(); </li><li>
        } </li><li>
    } </li><li>
 </li><li>
    function add(script, url){ </li><li>
        var scriptdom = document.createElement('script'); </li><li>
        scriptdom.type = 'text/javascript'; </li><li>
        scriptdom.loaded = false; </li><li>
        scriptdom.src = url; </li><li>
 </li><li>
        scriptdom.onload = function(){ </li><li>
            scriptdom.loaded = true; </li><li>
            run(script); </li><li>
            scriptdom.onload = scriptdom.onreadystatechange = null; </li><li>
        }; </li><li>
 </li><li>
        //for ie </li><li>
        scriptdom.onreadystatechange = function(){ </li><li>
            if ((scriptdom.readyState === 'loaded' || </li><li>
                    scriptdom.readyState === 'complete') && !scriptdom.loaded) { </li><li>
 </li><li>
                run(script); </li><li>
                scriptdom.onload = scriptdom.onreadystatechange = null; </li><li>
            } </li><li>
        }; </li><li>
 </li><li>
        document.getElementsByTagName('head')[0].appendChild(scriptdom); </li><li>
    } </li><li>
 </li><li>
    return { </li><li>
        load: function(url){ </li><li>
            var arg = arguments, </li><li>
                len = arg.length, </li><li>
                i = 1, </li><li>
                script = getScript(url), </li><li>
                loaded = script.loaded; </li><li>
 </li><li>
            for (; i < len; i++){ </li><li>
                var fun = arg[i]; </li><li>
                if (typeof fun === 'function'){ </li><li>
                    if (loaded) { </li><li>
                        fun(); </li><li>
                    }else{ </li><li>
                        script.funs.push(fun); </li><li>
                    } </li><li>
                } </li><li>
            } </li><li>
        } </li><li>
    }; </li><li>
}();</li></ol></div>

页: [1]

Chinaunix's Archiver

异步脚本加载 JS Loader