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

function include(script_filename) {

document.write('<' + 'script');

document.write(' language="javascript"');

document.write(' type="text/javascript"');

document.write(' src="' + script_filename + '">');

document.write('');

}

var which_script = '1.js';

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

感谢原著作者，谢谢