js-document、script、link异步载入

ie各个方面都有自己独特的方法，它为DOM中某些部分提供了readystatechange事件。支持readystatechange事件的对象都有readystate属性。readystate共有以下几个值：
uninitialized： 对象存在但未初始化；
loading：对象正在加载；
loaded：对象数据加载完毕；
interactive：可以操作对象了，但还没加载完毕；
complete：加载完毕。
注意上面5个值并不一定每个事件都全包含，并且不一定是什么顺序。下面讲到的加载会用到上面的内容。

1.document加载
众所周知 window.onload是等待所有资源加载完毕（包括图像）。
想要实现DOM树记载完毕就触发方法：DOM标准提供了一个DOMContentLoaded，DOM树加载完毕就会触发；ie的document对象的readystate属性值为interactive或complete的时候行为很像DOMContentLoaded。

function ready(callback){
    if(document.addEventListener){//DOM标准
        document.addEventListener('DOMContentLoaded', callback, false);
    }else if(document.attachEvent){//ie
        document.attachEvent('onreadystatechange',function(){
            if(document.readystate == 'interactive' || document.readystate == 'complete'){//交互或完成阶段
                document.detachEvent('onreadystatechange',arguments.callee);//为了避免2次触发
                callback();
            }
        });
    }else{//都不支持就直接等所有都下载完了算了...
        window.onload = callback;
    }
}

2.动态加载javascript
分为动态引入Js文件和直接添加js语句。
动态引入Js文件不会阻碍浏览器的线程。除了ie其他大部分浏览器的script标签都支持load方法；ie依然通过script的readystate属性值判断何时方法下载完毕并可用。

function loadScript(url, callback){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    if(script.onload){//非ie支持load
        script.onload = callback;
    }else{//ie
        script.onreadystatechange = function(){
            if(script.readystate == 'loaded' || script.readystate =='complete'){
                script.onreadystatechange = null;//为了避免2次触发
                callback();
            }
        }
    }
    script.src = url;
    document.body.appendChild(script);
}

动态载入Js语句就不涉及到什么时候可以用了，因为没有http请求了（这样做其实意义不是很大了）。

function loadScriptString(code){
    var script = document.createElement('script');
    script.type = 'text/javascript';
    try{
        script.appendChild(document.createTextNode(code));//DOM标准
    }catch(ex){
        script.text = code;//ie
    }
    document.body.appendChild(script);
}

3.动态载入样式link
和动态载入script很相似。一般来说，知不知道样式已经加载完成并不重要。ie和opera也支持link的load事件来判断加载完毕，ie中link对象也有readystatechange方法。
由于是否加载完成并不重要，下面载入外部文件的方法就不判断了。

function loadStyle(url){
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = "text/css";
    link.href = url;
    document.getElementsByTagName('head')[0].appendChild(link);
}
function loadStyleString(css){
    var style = document.createElement('style');
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));//DOM标准
    }catch(ex){
        style.styleSheet.cssText = css;//ie
    }
    document.getElementsByTagName('head')[0].appendChild(style);
}