JS延迟加载的几种方法


首先来介绍一下 type="text/javascript"> alert('script') type="text/javascript"> window.onload = function(){ alert('onload') }

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

1. DOM

head append script tag

[javascript]  view plain  copy
  1. window.onload = function () {  
  2.     setTimeout(function () {  
  3.   
  4.         // reference to     
  5.         var head = document.getElementsByTagName('head')[0];  
  6.   
  7.         // a new CSS    
  8.         var css = document.createElement('link');  
  9.         css.type = "text/css";  
  10.         css.rel = "stylesheet";  
  11.         css.href = "new.css";  
  12.   
  13.         // a new JS    
  14.         var js = document.createElement("script");  
  15.         js.type = "text/javascript";  
  16.         js.src = "new.js";  
  17.   
  18.         // preload JS and CSS    
  19.         head.appendChild(css);  
  20.         head.appendChild(js);  
  21.   
  22.         // preload image    
  23.         new Image().src = "new.png";  
  24.   
  25.     }, 1000);  
  26. };    
2. document.write

[javascript]  view plain  copy
  1. "javascript" type="text/javascript">    
  2.     function include(script_filename) {    
  3.         document.write('<' + 'script');    
  4.         document.write(' language="javascript"');    
  5.         document.write(' type="text/javascript"');    
  6.         document.write(' src="' + script_filename + '">');    
  7.         document.write(' + 'script' + '>');    
  8.     }    
  9.         
  10.     var which_script = '1.js';    
  11.     include(which_script);    
  12.   
3. Iframe

 

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

[javascript]  view plain  copy
  1. window.onload = function () {  
  2.     setTimeout(function () {  
  3.   
  4.         // create new iframe    
  5.         var iframe = document.createElement('iframe');  
  6.         iframe.setAttribute("width""0");  
  7.         iframe.setAttribute("height""0");  
  8.         iframe.setAttribute("frameborder""0");  
  9.         iframe.setAttribute("name""preload");  
  10.         iframe.id = "preload";  
  11.         iframe.src = "about:blank";  
  12.         document.body.appendChild(iframe);  
  13.   
  14.         // gymnastics to get reference to the iframe document    
  15.         iframe = document.all ? document.all.preload.contentWindow : window.frames.preload;  
  16.         var doc = iframe.document;  
  17.         doc.open(); doc.writeln(""); doc.close();  
  18.   
  19.         // create CSS    
  20.         var css = doc.createElement('link');  
  21.         css.type = "text/css";  
  22.         css.rel = "stylesheet";  
  23.         css.href = "new.css";  
  24.   
  25.         // create JS    
  26.         var js = doc.createElement("script");  
  27.         js.type = "text/javascript";  
  28.         js.src = "new.js";  
  29.   
  30.         // preload CSS and JS    
  31.         doc.body.appendChild(css);  
  32.         doc.body.appendChild(js);  
  33.   
  34.         // preload IMG    
  35.         new Image().src = "new.png";  
  36.   
  37.     }, 1000);  
  38. };    

4. Iframe static page

 

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

[javascript]  view plain  copy
  1. window.onload = function () {  
  2.     setTimeout(function () {  
  3.   
  4.         // create a new frame and point to the URL of the static    
  5.         // page that has all components to preload    
  6.         var iframe = document.createElement('iframe');  
  7.         iframe.setAttribute("width""0");  
  8.         iframe.setAttribute("height""0");  
  9.         iframe.setAttribute("frameborder""0");  
  10.         iframe.src = "preloader.html";  
  11.         document.body.appendChild(iframe);  
  12.   
  13.     }, 1000);  
  14. };  

5. Ajax eval

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

 

6. Ajax Injection

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

 

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

你可能感兴趣的:(JS延迟加载的几种方法)