Viele Personen haben möglicherweise das Problem des Ladens anderer JS -Dateien in JavaScript gestoßen, aber viele Freunde wissen möglicherweise nicht, wie sie beurteilen sollen, ob die von uns geladene JS -Datei geladen wurde. Wenn wir die Ladung nicht vervollständigen, werden wir nicht erfolgreich sein. In diesem Artikel wird erläutert, wie andere JS -Dateien in JS geladen und Rückruffunktionen nach dem Laden ausgeführt werden.
Wir können ein <skript> -Element dynamisch erstellen und das Skript dann laden, indem wir sein SRC -Attribut ändern. Aber woher wissen wir, dass die Skriptdatei geladen wurde? Weil einige unserer Funktionen ausgeführt werden müssen, nachdem das Skript geladen und wirksam wurde.
Nachdem ich im Netzwerk nach Ressourcen gesucht habe, stellte ich fest, dass Sie im IE -Browser die OnReadyStatEchange des <Script> -Elements verwenden können, um die Änderung im Ladezustand zu überwachen, und festzustellen, ob das Skript geladen oder abgeschlossen ist, ob sein ReadyState geladen oder abgeschlossen ist. Anstelle von IE -Browsern können Sie Onload verwenden, um direkt zu bestimmen, ob das Skript geladen ist.
Ein einfacher Implementierungsprozess sieht so aus:
// dh unter: var script = document.createelement ("script"); script.setattribute ("type", "text/javaScript"); script.onreadyStatechange = function () {if (this.readystate == erfolgreich "|| }} script.setAttribute ("src", scripts [i]); // Opera, FF, Chrome usw.: var script = document.createelement ("script"); skript.setAttribute ("type", "text/javascript"); script erfolgreich! ");} script.SetAttribute (" src ", Skripte [i]);Das Prinzip ist sehr einfach. Basierend auf diesen beiden einfachen Prinzipien haben wir einige Änderungen vorgenommen, und ich habe sie in zwei Funktionen geändert, nämlich serielle Laden- und parallele Ladeskripte.
Beim Übergeben eines Arrays, das mehrere JS -Dateipfade enthält, startet die serielle Ladefunktion mit der ersten Skriptdatei. Jedes Mal, wenn einer erfolgreich geladen wird, wird die nächste Skriptdatei geladen. Nach Abschluss des Ladens wird die Rückruffunktion ausgeführt. Paralleles Laden besteht darin, alle Skriptdateien von Anfang an zu laden, das heißt, sie beginnen vom gleichen Punkt, und wenn alle Ladevorgänge abgeschlossen sind, wird die Rückruffunktion ausgeführt.
Nach dem Test sind diese beiden Funktionen mit allen aktuellen Mainstream -Browsern kompatibel.
/*** concattenat laden des angegebenen Skripts* concattenat laden [asynchron] laden voneinander, jedes Laden wird abgeschlossen. Der nächste wird geladen* Nach Abschluss des Ladens wird der Rückruf ausgeführt. if (typeof (scripts)! = "object") var scripts = [scripts]; var head = document.getElementsByTagName ("head"). Artikel (0) || document.documentElement; var s = new array (), last = scripts.length - 1, recurSivalOw = function (i) {// Rekursive s [i] = document.createelement ("script"); s [i] .Setattribute ("Typ", "Text/JavaScript"); s [i] .onload = s [i] .onReadyStatechange = function () {// Handler für alle Browser anhängen if (!/*@cc_on!@*/0 || this.ReadyState == "Loaded" || this.ReadyState == "Complete") {this.onRoad = this.onReadyant = null; this.parentnode.removechild (this); if (i! = letztes) recurSivaload (i + 1); sonst wenn (typeof (callback) == "function") callback (); }} s [i] .setattribute ("src", Skripte [i]); Head.appendchild (s [i]); }; RecurSivaload (0);} /*** Laden Sie das angegebene Skript parallel* Laden parallel [synchron] gleichzeitig, unabhängig davon, ob die vorherige Last abgeschlossen ist oder nicht, alle direkt* Führen Sie den Rückruf nach dem Laden von Ladefunktionen ab. Parallelloadscripts (Skripte, Rückruf) {if (typeof (scripts)! = "object") var scripts = [scripts]; var head = document.getElementsByTagName ("head"). Artikel (0) || document.documentElement, s = new Array (), geladen = 0; für (var i = 0; i <scripts.length; i ++) {s [i] = document.createelement ("script"); s [i] .Setattribute ("Typ", "Text/JavaScript"); s [i] .onload = s [i] .onReadyStatechange = function () {// Handler für alle Browser anhängen if (!/*@cc_on!@*/0 || this.ReadyState == "Loaded" || this.ReadyState == "Complete") {laded ++; this.onReadyStatechange = null; this.parentnode.removechild (this); if (geladen == scripts.length && typeof (callback) == "function") callback (); }}; s [i] .SetatTribute ("src", Skripte [i]); Head.appendchild (s [i]); }}Hier wird das <Script> -T -Tag dynamisch in das <kopf> -Tag in der Seite eingefügt, und das Tag -Element wird nach dem Laden automatisch entfernt.
Wenn Sie vorsichtig sind, werden Sie auch feststellen, dass hier eine Methode, die als bedingte Zusammenstellung bezeichnet wird, als Ausdruck (!/*@Cc_on!@*/0) verwendet wird, um festzustellen, ob es sich nicht um einen IE -Browser handelt. Die bedingte Zusammenstellung steht nicht im Mittelpunkt dieses Artikels. Wenn Sie interessiert sind, können Sie nach relevanten Materialien für das Lernen suchen.
So verwenden Sie diese beiden Funktionen: Hier deklarieren wir eine Array-Variable, die zwei Remote-JS-Dateiadressen enthält (natürlich unterstützt das <Skript> Tag-Call-Skript Cross-Domain):
var scripts = ["http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://wellstyled.com/files/jquery.debug/jquery.debug.js" weibliche Dateien. und das JQuery Debug -Plugin // können Sie die folgende Methode verwenden, um den Rückruf nach dem Erfolg anzurufen und auszuführen. Seriesloadscripts (Skripte, function () { / * debug = new $ .debug ({posto: {x: 'rechts', y: 'boden'}, width: '480px', Höhe: '50%', itemDivider:' <hr> ', Listdom:' All '});Die in Serie geladene Funktion wird hier verwendet. Natürlich können Sie auch parallele Ladefunktionen verwenden. Dies kann gemäß der Situation verwendet werden. Es wird empfohlen, dass jedes nächste Skript von dem vorherigen Skript abhängig ist, um serielles Laden zu verwenden, ansonsten eine parallele Verbindung verwenden, da die parallele Verbindung im Prinzip schneller als die serielle Verbindung ist.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.