You are here
7种延迟加载javascript方法
延迟加载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 属性(缺点是不能控制加载的顺序)
<script src="" async="true"/>
参考：
http://www.phpied.com/the-art-and-craft-of-postload-preloads/
http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
来自 http://blog.csdn.net/baoeni/article/details/7107570
普通分类: