一般的に、必要なすべてのJavaScriptコードが一度にロードされた場合、最初のWebページは遅くなりますが、多くのロードされたコードを使用する必要はなく、この不必要なパフォーマンス廃棄物を避ける必要があります。 JavaScriptコードを動的にロードする場合は、DOMモデルを使用してHTMLドキュメントに<script>ノードを追加し、このノードのSRC属性(アウトリーチJavaScriptファイル)を動的にロードする必要があるJavaScriptコードに設定できます。
このような関数を完了する例は次のとおりです。
(1)新しいjsloadertest.htmlファイルを作成します
<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <タイトルjsloader(){this.load = function(url){// get All <script> tags var ss = document.getelementsbytagname( "script"); //指定されたファイルが含まれているかどうかをテストします。含まれている場合、onsuccessイベントをトリガーし、(i = 0; i <ss.length; i ++){if(ss [i] .src && ss [i] .src.indexof(url)!= -1){this.onsucs();戻る; }} //スクリプトノードを作成し、その属性をアウトリーチJavaScriptファイルs = document.createelement( "script")に設定します。 s.type = "text/javascript"; s.src = url; // headノードを取得し、<script>をvar head = document.getElementsbytagname( "head")[0]に挿入します。 head.AppendChild(s); //独自の参照var self = thisを取得します。 // IEブラウザの場合、ReadyStateChangeイベントを使用して負荷が成功したかどうかを判断します//他のブラウザの場合、オンロードイベントを使用して、負荷が成功しているかどうかを判断します//以下と同じように、Onsuccessイベント。 if(this.readystate && this.readystate == "loading")return; self.onsuccess(); } s.onerror = function(){head.removechild(s); self.onfailure(); }}; // loading success event this.onsuccess = function(){}; //失敗したイベントを定義するthis.onfailure = function(){}; } function btnclick(){//オブジェクトの作成var jsloader = new jsloader(); // Loading Success Handler jsloader.onsuccess = function(){sayhello(); } //ロード障害ハンドラーjsloader.onfailure = function(){alert( "ファイルの読み込み障害!"); } // jsloader.load( "hello.js")の読み込みを開始します。 } </script> </head> <body> <label> <入力タイプ= "submit" name = "inclick =" javascript:btnclick() "value =" javascript file "> </label> </body> </html> </html>(2)次のコードを含む新しいhello.jsファイルを作成します。
// javascriptドキュメント関数sayshello(){alert( "hello world!javascriptファイルに正常にロードされた"); } // javascript documentfunction sayshello(){alert( "hello world!javascript file"); }