快捷導(dǎo)航

JS動(dòng)態(tài)加載腳本并執(zhí)行回調(diào)操作

更新時(shí)間：2016年08月24日 10:19:09 作者：※WYF※

這篇文章主要為大家詳細(xì)介紹了JS動(dòng)態(tài)加載腳本并下載完成后執(zhí)行回調(diào)操作，感興趣的小伙伴們可以參考一下

關(guān)于在javascript里面加載其它的js文件的問(wèn)題可能很多人都遇到過(guò)，但很多朋友可能并不知道怎么判斷我們要加載的js文件是否加載完成，如果沒(méi)有加載完成我們就調(diào)用文件里面的函數(shù)是不會(huì)成功的。本文講解怎么在js中加載其它js文件并在加載完成后執(zhí)行回調(diào)函數(shù)。

我們可以動(dòng)態(tài)的創(chuàng)建 <script> 元素，然后通過(guò)更改它的 src 屬性來(lái)加載腳本，但是怎么知道這個(gè)腳本文件加載完成了呢，因?yàn)槲覀冇行┖瘮?shù)需要在腳本加載完成生效后才能開始執(zhí)行。
經(jīng)過(guò)對(duì)網(wǎng)絡(luò)上資源的搜索，我發(fā)現(xiàn)在 IE 瀏覽器中可以使用 <script> 元素的 onreadystatechange 來(lái)監(jiān)控加載狀態(tài)的改變，并通過(guò)判斷它的 readyState 是 loaded 或 complete 來(lái)判斷腳本是否加載完成。而非 IE 瀏覽器可以使用 onload 來(lái)直接判斷腳本是否加載完成。

一個(gè)簡(jiǎn)單的實(shí)現(xiàn)過(guò)程看上去是下面這樣的：

//IE下：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function() {
  if(this.readyState == "loaded" || this.readyState == "complete"){
    alert("加載成功啦！");
  }
}
script.setAttribute("src",scripts[i]);

//Opera、FF、Chrome等：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onload = function() {
  alert("加載成功啦！");
}
script.setAttribute("src",scripts[i]);

原理很簡(jiǎn)單，根據(jù)這兩個(gè)簡(jiǎn)單的原理，我們進(jìn)行一些修改，我把改成了兩個(gè)函數(shù)，分別是串行加載和并行加載腳本。

當(dāng)傳一個(gè)包含多個(gè)JS文件路徑的數(shù)組時(shí)，串行加載函數(shù)從第一個(gè)腳本文件加載開始，每加載成功一個(gè)便開始加載下一個(gè)腳本文件，全部加載完成后執(zhí)行回調(diào)函數(shù)。而并行加載是一開始便加載全部的腳本文件，也就是他們從同一點(diǎn)開始加載，當(dāng)全部加載完成后，執(zhí)行回調(diào)函數(shù)。

經(jīng)過(guò)測(cè)試，這兩個(gè)函數(shù)兼容目前的所有主流瀏覽器。

/** 
 * 串聯(lián)加載指定的腳本
 * 串聯(lián)加載[異步]逐個(gè)加載，每個(gè)加載完成后加載下一個(gè)
 * 全部加載完成后執(zhí)行回調(diào)
 * @param array|string 指定的腳本們
 * @param function 成功后回調(diào)的函數(shù)
 * @return array 所有生成的腳本元素對(duì)象數(shù)組
 */

function seriesLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
  var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //遞歸
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback();
      }
    }
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  };
  recursiveLoad(0);
}
 

/**
 * 并聯(lián)加載指定的腳本
 * 并聯(lián)加載[同步]同時(shí)加載，不管上個(gè)是否加載完成，直接加載全部
 * 全部加載完成后執(zhí)行回調(diào)
 * @param array|string 指定的腳本們
 * @param function 成功后回調(diào)的函數(shù)
 * @return array 所有生成的腳本元素對(duì)象數(shù)組
 */

function parallelLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0;
  for(var i=0; i<scripts.length; i++) {
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        loaded++;
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(loaded == scripts.length && typeof(callback) == "function") callback();
      }
    };
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  }
}

在這里是把 <script> 標(biāo)簽動(dòng)態(tài)的插入到頁(yè)面中的 <head> 標(biāo)簽內(nèi)部，并且加載完成后標(biāo)簽元素會(huì)被自動(dòng)移除。
細(xì)心的你還會(huì)發(fā)現(xiàn)，這里使用了一種稱作條件編譯的方法作為表達(dá)式（!/*@cc_on!@*/0）來(lái)判斷是否非 IE 瀏覽器，關(guān)于條件編譯并不是本文的重點(diǎn)，有興趣的您可以上網(wǎng)查找相關(guān)資料進(jìn)行學(xué)習(xí)。

這兩個(gè)函數(shù)的使用方法：這里我們聲明了一個(gè)數(shù)組變量，里面包含了兩個(gè)遠(yuǎn)程的JS文件地址（當(dāng)然 <script> 標(biāo)簽調(diào)用腳本是支持跨域的）：

var scripts = [ 
  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
  "http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];

//這兩個(gè)文件分別是 jQuery 1.4.的庫(kù)文件和 jQuery Debug 插件
//然后你可以使用下面的方法調(diào)用并在成功后執(zhí)行回調(diào)了。

seriesLoadScripts(scripts,function(){ 

  /*
  debug = new $.debug({ 
    posTo : { x:'right', y:'bottom' },
    width: '480px',
    height: '50%',
    itemDivider : '<hr>',
    listDOM : 'all'
  }); 

  */
  alert('腳本加載完成啦');
});

這里使用的是串聯(lián)加載的函數(shù)，當(dāng)然你也可以使用并聯(lián)加載函數(shù)，這可以根據(jù)情況使用，建議每下一個(gè)腳本對(duì)上一個(gè)腳本有依賴性的使用串聯(lián)加載，否則使用并聯(lián)，因?yàn)樵砩喜⒙?lián)要比串聯(lián)快那么些。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: