js判斷引入的js檔案是否載入完畢

如果javascript程式碼較少的話完全可以將js程式碼通過<script></script>標籤寫在當前頁面，但是如果js程式碼非常龐大的話，那麼頁面將會變得非常的臃腫，並且由於js程式碼是同步載入，所以當js程式碼載入的時候，會阻塞下面內容的解析，所以最好能夠動態載入js功能，尤其是能夠實現根據需要動態引入外部js檔案。由於動態載入js檔案是非同步的，所以有時候需要判斷js檔案是否載入完畢，下面就通過程式碼介紹一下如何實現判斷功能。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function dynamicLoad(){
  var _doc=document.getElementsByTagName('head')[0];
  var script=document.createElement('script');
  script.setAttribute('type','text/javascript');
  script.setAttribute('src','jquery-1.8.3.js');
  _doc.appendChild(script);
  script.onload=script.onreadystatechange=function(){
    if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
      alert('done');
    }
    script.onload=script.onreadystatechange=null;
  }
}

上面你的程式碼實現了js檔案載入是否完成的功能，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function dynamicLoad(){}，此函式實現判斷指定檔案是否載入完畢的功能。

2.var _doc=document.getElementsByTagName('head')[0]，獲取head頭部標籤元素物件。

3.var script=document.createElement('script')，建立一個script標籤元素。

4.script.setAttribute('type','text/javascript')，設定script標籤的type屬性。

5.script.setAttribute('src','jquery-1.8.3.js')，設定script標籤的src屬性值，也就是要載入js檔案的路徑。

6._doc.appendChild(script)，將script標籤附加到head標籤中，否則只能夠在IE11以下瀏覽器能夠完成判斷。

7.script.onload=script.onreadystatechange=function(){

   if(!his.readyState||this.readyState=='loaded'||this.readyState=='complete'){

     alert('done');

   }

   script.onload=script.onreadystatechange=null;

}

上面程式碼可以參閱script.onload=script.onreadystatechange=function()一章節。

8.script.onload=script.onreadystatechange=null，刪除事件處理函式。

二.相關閱讀:

1.getElementsByTagName()參閱document.getElementsByTagName()一章節。

2.createElement()參閱JavaScript createElement()一章節。

3.setAttribute()參閱JavaScript setAttribute()一章節。