7种延迟加载javascript方法(转)

延迟加载javascript,也就是页面加载完成之后再加载javascript,也叫on demand(按需)加载,一般有一下几个方法:

1. DOM

head append script tag

window.onload = function () {
    setTimeout(function () {

        // reference to   
        var head = document.getElementsByTagName('head')[0];

        // a new CSS  
        var css = document.createElement('link');
        css.type = "text/css";
        css.rel = "stylesheet";
        css.href = "new.css";

        // a new JS  
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = "new.js";

        // preload JS and CSS  
        head.appendChild(css);
        head.appendChild(js);

        // preload image  
        new Image().src = "new.png";

    }, 1000);
};  
2. document.write

3. Iframe

 

和第一种类似,但是script tag是放到iframe的document里面。

window.onload = function () {
    setTimeout(function () {

        // create new iframe  
        var iframe = document.createElement('iframe');
        iframe.setAttribute("width", "0");
        iframe.setAttribute("height", "0");
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("name", "preload");
        iframe.id = "preload";
        iframe.src = "about:blank";
        document.body.appendChild(iframe);

        // gymnastics to get reference to the iframe document  
        iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;
        var doc = iframe.document;
        doc.open(); doc.writeln(""); doc.close();

        // create CSS  
        var css = doc.createElement('link');
        css.type = "text/css";
        css.rel = "stylesheet";
        css.href = "new.css";

        // create JS  
        var js = doc.createElement("script");
        js.type = "text/javascript";
        js.src = "new.js";

        // preload CSS and JS  
        doc.body.appendChild(css);
        doc.body.appendChild(js);

        // preload IMG  
        new Image().src = "new.png";

    }, 1000);
};  

4. Iframe static page

 

直接把需要加载东西放到另一个页面中

window.onload = function () {
    setTimeout(function () {

        // create a new frame and point to the URL of the static  
        // page that has all components to preload  
        var iframe = document.createElement('iframe');
        iframe.setAttribute("width", "0");
        iframe.setAttribute("height", "0");
        iframe.setAttribute("frameborder", "0");
        iframe.src = "preloader.html";
        document.body.appendChild(iframe);

    }, 1000);
};

5. Ajax eval

用ajax下载代码,然后用eval执行

 

6. Ajax Injection

用ajax下载代码,建立一个空的script tag,设置text属性为下载的代码

 

7. async 属性(缺点是不能控制加载的顺序)

你可能感兴趣的:(javascript)