js如何判斷引入的js文件是否加載完畢:
如果javascript代碼較少的話完全可以將js代碼通過<script></script>標簽寫在當前頁面，但是如果js代碼非常龐大的話，那么頁面將會變得非常的臃腫，並且由於js代碼是同步加載，所以當js代碼加載的時候，會阻塞下面內容的解析，所以最好能夠動態加載js功能，尤其是能夠實現根據需要動態引入外部js文件。由於動態加載js文件是異步的，所以有時候需要判斷js文件是否加載完畢，下面就通過代碼介紹一下如何實現判斷功能。
代碼如下:
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()函數可以參閱js的createElement()和appendChild()函數的作用一章節。
3.setAttribute()函數可以參閱setAttribute()函數的用法詳解一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14775