Wenn alle erforderlichen JavaScript -Code gleichzeitig geladen werden, verlangsamt sich die erste Webseite, aber viele geladene Codes müssen nicht verwendet werden, und dieser unnötige Leistungsabfall sollte vermieden werden. Wenn Sie JavaScript -Code dynamisch laden möchten, können Sie das DOM -Modell zum Hinzufügen eines <skript> -Knotens im HTML -Dokument verwenden und das SRC -Attribut dieses Knotens (d. H. Eine Outreach -Javascript -Datei) auf JavaScript -Code festlegen, der dynamisch geladen werden muss.
Hier ist ein Beispiel für eine solche Funktion:
(1) Erstellen Sie eine neue jsloadtest.html -Datei
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <titels> Beispiel des Ladens von Javascript-Code-Code-Code-Code-Titeln. Jsloader () {this.load = function (url) {// Alle <Script> Tags var ss = document.getElementsByTagName ("Skript"); // Testen Sie, ob die angegebene Datei enthalten ist. Wenn es eingeschlossen wurde, auslösen Sie das Onsuccess-Ereignis und kehren Sie für (i = 0; i <ss.Length; i ++) {if (ss [i] .src && ss [i] .src.indexof (url)! zurückkehren; }} // Skriptknoten erstellen und seine Attribute auf die Outreach JavaScript -Datei s = document.createelement ("script") festlegen; s.type = "text/javaScript"; S.Src = URL; // Kopfknoten abrufen und <Script> in var head = document.getElementsByTagName ("head") [0] einfügen; head.Appendchild (s); // Erhalten Sie Ihre eigene Referenz var self = this; // Verwenden Sie für den IE -Browser das Ereignis von ReadyStatEchange, um festzustellen, ob die Last für andere Browser erfolgreich ist, um das Onload -Ereignis zu bestimmen, ob die Last erfolgreich ist // S.onload = s.onReadyStatechange = Funktion () {S.onload = S.onRreadyStatechange = Funktion () {//. Das Onsuccess -Ereignis, das gleiche unten. if (this.readyState && this.readystate == "laden") return; self.onsuccess (); } S.onError = function () {head.removechild (s); self.onfailure (); }}; // Definieren Sie das Ladeerfolgsereignis. // das fehlgeschlagene Ereignis definieren. } function btnclick () {// Erstellen Sie das Objekt var jsloader = new jsloader (); // Definieren Sie den Ladeerfolgshandler jsloader.Oonsuccess = function () {Sayhello (); } // Ladefehlerhandler jsloader.onfailure = function () {alert ("Ladedatei fehlgeschlagen!") } // Laden Sie jsloader.load ("hello.js"); } </script> </head> <body> <label> <Eingabe type = "name =" subieren "onclick =" javaScript: btnclick () "value =" Laden Javascript -Datei "> </label> </body> </html>(2) Erstellen Sie eine neue Hello.js -Datei mit dem folgenden Code:
// JavaScript -Dokumentfunktion SayShello () {alert ("Hallo Welt! Erfolgreich geladene JavaScript -Datei"); } // JavaScript documentFunction SayShello () {alert ("Hallo Welt! Erfolgreich geladene JavaScript -Datei"); }