Ausführliche Erläuterung, wie Sie mit Javascript ein Skript laden und Callback-Codebeispiele ausführen

Wir können das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element dynamisch erstellen und dann das Skript laden, indem wir sein src-Attribut ändern, aber woher wissen wir, dass die Skriptdatei geladen wird, da einige unserer Funktionen erst danach wirksam werden müssen das Skript geladen ist, um die Ausführung zu starten. Im IE-Browser können Sie onreadystatechange des 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Elements verwenden, um die Änderung des Ladestatus zu überwachen und zu beurteilen, ob das Skript geladen ist, indem Sie beurteilen, ob sein readyState geladen oder abgeschlossen ist. Nicht-IE-Browser können mit onload direkt ermitteln, ob das Skript geladen ist.

Ein einfacher Implementierungsprozess sieht so aus:

//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]);

Das Prinzip ist sehr einfach, basierend auf diesen beiden einfachen Prinzipien, die wir erstellen einige Änderungen, nämlich serielle Lade- und parallele Ladeskripte.

Wenn ein Array mit mehreren JS-Dateipfaden übergeben wird, beginnt die serielle Ladefunktion mit dem Laden der ersten Skriptdatei und beginnt nach jedem erfolgreichen Laden mit dem Laden der nächsten Skriptdatei, und dann werden alle geladen Führen Sie die Callback-Funktion aus. Beim parallelen Laden werden alle Skriptdateien von Anfang an geladen, d. h. sie beginnen am selben Punkt zu laden. Wenn der gesamte Ladevorgang abgeschlossen ist, wird die Rückruffunktion ausgeführt.

Nach dem Test sind diese beiden Funktionen mit allen aktuellen Mainstream-Browsern kompatibel.

/** 
 * 串联加载指定的脚本
 * 串联加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */
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);
}
 

/**
 * 并联加载指定的脚本
 * 并联加载[同步]同时加载，不管上个是否加载完成，直接加载全部
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */

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]);
  }
}

Hier wird das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag dynamisch in das 93f0f5c25f18dab9d176bd4f6de5d30e-Tag eingefügt und das Tag-Element wird automatisch entfernt.
Wenn Sie vorsichtig sind, werden Sie auch feststellen, dass hier eine Methode namens bedingte Kompilierung als Ausdruck (!/*@cc_on!@*/0) verwendet wird, um festzustellen, ob es sich um einen Nicht-IE-Browser handelt nicht über bedingte Kompilierung Wenn Sie interessiert sind, können Sie online nach relevanten Informationen suchen, um mehr darüber zu erfahren.

So verwenden Sie diese beiden Funktionen: Hier deklarieren wir eine Array-Variable, die zwei Remote-JS-Dateiadressen enthält (natürlich unterstützt das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag-Aufrufskript domänenübergreifend):

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

//这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
//然后你可以使用下面的方法调用并在成功后执行回调了。

seriesLoadScripts(scripts,function(){ 

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

  */
  alert(&#39;脚本加载完成啦&#39;);
});

Hier kommt natürlich auch die Parallelladefunktion zum Einsatz. Diese kann je nach Situation genutzt werden gepaart werden mit Wenn ein Skript Abhängigkeiten hat, verwenden Sie das Serienladen, andernfalls verwenden Sie die Parallelverbindung, da die Parallelverbindung im Prinzip schneller ist als die Serienverbindung.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie Sie mit Javascript ein Skript laden und Callback-Codebeispiele ausführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!