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

最新推荐文章于 2024-07-08 08:31:50 发布

dragoo1

最新推荐文章于 2024-07-08 08:31:50 发布

阅读量2.1w

点赞数

分类专栏： javascript 文章标签： javascript

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：

1. DOM

head append script tag

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

        // reference to <head>  
        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

<script language="javascript" type="text/javascript">  
    function include(script_filename) {  
        document.write('<' + 'script');  
        document.write(' language="javascript"');  
        document.write(' type="text/javascript"');  
        document.write(' src="' + script_filename + '">');  
        document.write('</' + 'script' + '>');  
    }  
      
    var which_script = '1.js';  
    include(which_script);  
</script>

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("<html><body></body></html>"); 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 属性(缺点是不能控制加载的顺序)

参考：

http://www.phpied.com/the-art-and-craft-of-postload-preloads/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

转自：http://www.cnblogs.com/human/archive/2013/11/12/3419724.html

dragoo1

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
7种延迟加载javascript方法(转)

延迟加载javascript，也就是页面加载完成之后再加载javascript，也叫on demand（按需）加载，一般有一下几个方法：1. DOMhead append script tagwindow.onload = function () { setTimeout(function () { // reference to var
复制链接

扫一扫

专栏目录