JS延迟加载的方式

最新推荐文章于 2024-07-24 20:51:04 发布

梦颖飞燕

最新推荐文章于 2024-07-24 20:51:04 发布

阅读量418

点赞数 1

分类专栏： JS

JS 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

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

1. 动态创建DOM方式

head append script tag

[javascript]view plaincopy 
   
 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

[javascript]view plaincopy 
   
 <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里面。

[javascript]view plaincopy 
   
 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

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

[javascript]view plaincopy 
   
 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.defer 属性

该属性用来通知浏览器，这段脚本代码将不会产生任何文档内容。例如 JavaScript代码中的document.write()方法将不会骑作用，浏览器遇到这样的代码将会忽略，并继续执行后面的代码。属性只能是 defer，与属性名相同。在HTML语法格式下，也允许不定义属性值，仅仅使用属性名。加上 defer 等于在页面完全在入后再执行.