js動態載入實現提高網頁載入速度

admin發表於2017-03-26
JS網頁

通常情況下，如果網頁載入的js檔案較多，並且一次性載入完畢的話，會非常的影響網頁載入的速度，當然將會嚴重影響使用者體驗，最終會影響的站點的人氣，所以我們要想辦法解決這個問題。很多時候，載入的js程式碼在當前頁面功能中並不需要，所以如果能夠根據需要動態的載入js檔案，那麼將會極大的提高網頁的載入速度，下面就通過程式碼例項介紹一下如何動態載入js。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript"> 
function JsLoader(){ 
  this.load=function(url){ 
    var script=document.getElementsByTagName("script"); 
    for (index=0;index<script.length;index++){ 
      if(script[index].src && script[index].src.indexOf(url)!=-1){ 
        this.onsuccess(); 
        return; 
      } 
    } 
    scriptEle=document.createElement("script"); 
    scriptEle.type="text/javascript"; 
    scriptEle.src=url; 
    var head=document.getElementsByTagName("head")[0]; 
    head.appendChild(scriptEle); 
    var self=this; 
    scriptEle.onload=function(){ 
      self.onsuccess(); 
    } 
    scriptEle.onerror=function(){
      head.removeChild(scriptEle); 
      self.onfailure(); 
    } 
  }; 
  this.onsuccess=function(){}; 
  this.onfailure=function(){}; 
} 
 
function btnClick(){ 
  var jsLoader=new JsLoader(); 
  jsLoader.onsuccess=function(){ 
    sayHello(); 
  } 
  jsLoader.onfailure=function(){ 
    alert("檔案載入失敗！"); 
  } 
  jsLoader.load("http://www.softwhy.com/mytest/js/antzone.js"); 
}
 
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    btnClick();
  }
}
</script> 
</head> 
<body> 
<label> 
<input type="button" id="bt" value="載入js檔案"> 
</label> 
</body> 
</html>

上面你的程式碼實現了動態js檔案載入效果，也就是當需要的時候再去載入js檔案，而不是一股腦的完全載入完畢。

antzone.js檔案中的程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function sayHello(){ 
  alert("螞蟻部落歡迎您，js檔案載入完畢");   
}

下面介紹一下上面功能的實現過程:

一.程式碼註釋:

1.function JsLoader(){}，此函式實現了動態載入效果，它用作建構函式的。

2.this.load=function(url){}，宣告一個函式用來動態js檔案，引數是要載入js檔案的路徑。

3.var script=document.getElementsByTagName("script")，獲取頁面所有的script標籤集合。

4.for (index=0;index<script.length;index++)，遍歷每一個script標籤。

5.if(script[index].src && script[index].src.indexOf(url)!=-1){ 

  this.onsuccess(); 

  return; 

}判斷script是否具有src屬性，這個也是很有必要的，因為script標籤並不一定就是引入外部js檔案，也可以將js程式碼寫在內部，如果有src屬性，那麼在判斷src屬性值是否函式引入js檔案的路徑，如果有的話那麼就呼叫onsuccess()函式，並跳出函式的執行。

6.scriptEle=document.createElement("script")，建立一個script標籤元素。

7.scriptEle.type="text/javascript"，設定type屬性。

8.scriptEle.src=url，設定src屬性。

9.var head=document.getElementsByTagName("head")[0]，獲取head標籤。

10.head.appendChild(scriptEle)，將新建立的script標籤追加到head標籤中。

11.var self=this，將this的引用賦值給變數self，這一點也很重要，因為有時候this的引用並不是指向建構函式建立的物件，這樣的話就可以使用self來替代this。

12.scriptEle.onload=function(){ 

  self.onsuccess(); 

}

載入完畢則呼叫onsuccess()函式，這裡就能顯現將this引用賦值給self的作用了，因為在這個事件處理函式中this是指向scriptEle，如果再用this就不能夠呼叫onsuccess()。

13.scriptEle.onload=scriptEle.onreadystatechange=function(){

  self.onsuccess();

}

上面你的程式碼可以參閱script.onload=script.onreadystatechange=function()的作用一章節。14.scriptEle.onerror=function(){

  head.removeChild(scriptEle); 

  self.onfailure(); 

}

如果出則執行出現錯誤，則會刪除建立的script標籤，並且執行相應的函式。

15.this.onsuccess=function(){}，宣告一個函式成功的時候，呼叫的函式，在使用中會被重寫。

16.function btnClick(){}，點選按鈕就會執行此函式。

17.var jsLoader=new JsLoader()，建立一個物件例項。

18.jsLoader.onsuccess=function(){sayHello();}，重寫onsuccess函式。

二.相關閱讀:

1.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。

2.indexOf()函式可以參閱javascript indexof()一章節。

3.createElement()函式可以參閱js createElement()一章節。

相關文章