Javascript檔案動態載入一直是比較困擾的一件事情,像網路上傳的比較常見的做法:
function loadjs(fileurl){ var sct = teElement("script"); = fileurl; ndChild(sct);}
然後我們來測試一下結果:
function loadjs(fileurl){ var sct = teElement("script"); = fileurl; ndChild(sct); } loadjs(""); loadjs("") loadjs("")
程式碼載入完後,會出現下圖的錯誤：
jquery明明是載入在第一個處理,為什麼還是報jQuery不存在的物件呢?
因為這樣載入，相當於開啟了三個執行緒,只是jquery這個檔案先啟動執行緒,而jquery執行完這個執行緒的時間,超過了後面兩個時間. 因此後面執行完的,可能沒能找到jquery這個物件。
然這種方式怎麼處理呢?
其實檔案的載入是有個狀態處理的.檔案的載入有個onload事件,就是可以監聽檔案是否載入完成的事件.
因此我們可以考慮這個方法來處理我們想要的結果.我們用直觀的方式來處理.改進後的.程式碼如下：
function loadjs(fileurl, fn){ var sct = teElement("script"); = fileurl; if(fn){ ad = fn; } ndChild(sct); } loadjs("",function(){ loadjs("",function(){ loadjs("") }) });
OK,執行完這個程式碼之後,載入檔案都是在前一個載入完成後,才會載入另外一個,這樣就不會造成找不到用到的物件了.
然後我們來執行一個彈出框的效果,程式碼裡面使用了 外掛. 載入程式碼如下:
loadjs("",function(){ loadjs("",function(){ loadjs("",function(){ t("Hello world!", function() { ("Hello world callback"); }); }) }) });
重新整理頁面,就會直接顯示彈出框：
動態載入的程式碼,往往容易在這裡花費很多時間除錯.大家最好的辦法就是寫一個最簡單的例子,理解其中的原因. 這裡的程式碼都可以進行封裝,還可以加入CSS檔案的載入.作為自己的外掛使用。
