多くの人がJavaScriptに他のJSファイルをロードするという問題に遭遇した可能性がありますが、多くの友人は、ロードしたいJSファイルがロードされているかどうかを判断する方法を知らないかもしれません。負荷が完了しないと成功しません。この記事では、JSに他のJSファイルをロードし、ロード後にコールバック関数を実行する方法について説明します。
<script>要素を動的に作成し、SRC属性を変更してスクリプトをロードできますが、スクリプトファイルがロードされていることをどのようにして知ることができますか？スクリプトがロードされて有効になった後、私たちの関数の一部を実行する必要があるためです。
ネットワークでリソースを検索した後、IEブラウザーでは、<script>要素のonreadedStateChangeを使用して、読み込み状態の変更を監視し、ReadyStateがロードまたは完了したかどうかを判断してスクリプトがロードまたは完了したかどうかを判断できることがわかりました。 IEブラウザの代わりに、Onloadを使用して、スクリプトがロードされているかどうかを直接決定できます。
単純な実装プロセスは次のようになります：
//：var script = document.createelement（ "script"）; script.setattribute（ "type"、 "text/javascript"）; script.onreadystatechange = function（）{if（this.readystate == "loaded" || this.readystate == "complete"）{alert（loaded leasply！ "）; }} script.setAttribute（ "src"、scripts [i]）; // opera、ff、chromeなど。var script = document.createelement（ "script"）; script.setattribute（ "type"、 "text/javascript"）; script.onload = function（原則は非常に単純です。これらの2つの単純な原則に基づいて、いくつかの変更を行い、2つの機能、つまりシリアルロードと並列ロードスクリプトに変更しました。
複数のJSファイルパスを含む配列を渡すと、シリアルロード機能は最初のスクリプトファイルロードから始まります。正常にロードされるたびに、次のスクリプトファイルがロードされます。すべてのロードが完了すると、コールバック関数が実行されます。並列ロードは、すべてのスクリプトファイルを最初からロードすることです。つまり、それらは同じポイントから開始し、すべてのロードが完了すると、コールバック関数が実行されます。
テスト後、これらの2つの機能は、現在のすべての主流ブラウザーと互換性があります。
/***指定されたスクリプトの荷重の連結*連結負荷[非同期]負荷、各ロードが完了し、次の負荷がロードされます*すべての負荷が完了した後、コールバックが実行されます* @paramアレイ|文字列指定されたスクリプト* if（typeof（scripts）！= "object"）var scripts = [scripts]; var head = document.getElementsByTagname（ "head"）。アイテム（0）|| document.documentlement; var s = new array（）、last = scripts.length -1、recursiveload = function（i）{// recursives s [i] = document.createelement（ "script"）; s [i] .setattribute（ "type"、 "text/javascript"）; s [i] .onload = s [i] .onedystatechange = function（）{//すべてのブラウザーにハンドラーを添付するif（！/*@cc_on！@*/0 || this.readystate == "loaded" || of.readystate == "complete"）{this.onload = thisedestechange = 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）;} /***指定されたスクリプトを並列にロードします*前の負荷が完了したかどうかに関係なく、同時に並列[同期]をロードします。 parallelloadscripts（scripts、callback）{if（typeof（scripts）！= "object"）var scripts = [scripts]; var head = document.getElementsByTagname（ "head"）。アイテム（0）|| document.documentlement、s = new array（）、loaded = 0; for（var i = 0; i <scripts.length; i ++）{s [i] = document.createelment（ "script"）; s [i] .setattribute（ "type"、 "text/javascript"）; s [i] .onload = s [i] .onreadystatechange = function（）{//すべてのブラウザのハンドラーを添付するif（！/*@cc_on！@*/0 || this.readystate == "loaded" || this.readystate == "complete"）{loaded ++; this.onededStateChange = null; this.parentnode.removechild（this）; if（loaded == scripts.length && typeof（callback）== "function"）callback（）; }}; s [i] .setattribute（ "src"、scripts [i]）; head.AppendChild（s [i]）; }}ここでは、<script>タグがページの<head>タグに動的に挿入され、ロード後にタグ要素が自動的に削除されます。
注意している場合は、条件付きコンパイルと呼ばれる方法が式（！/*@cc_on！@*/0）として使用されて、IEブラウザではないかどうかを判断することもわかります。条件付き編集は、この記事の焦点ではありません。興味がある場合は、関連する資料を学習用に検索できます。
これら2つの機能の使用方法：ここでは、2つのリモートJSファイルアドレスを含む配列変数を宣言します（もちろん、<script>タグコールスクリプトはクロスドメインをサポートしています）：
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デバッグプラグイン//次の方法を使用して、成功後にコールバックを呼び出して実行できます。 seriesLoadScripts（scripts、function（）{ / * debug = new $ .debug（{x x： 'right'、y： 'bottom'}、width： '480px'、height：'50％ '、itemdivider：' <hr> '、listdom：' all '}）;直列にロードされた関数はここで使用されます。もちろん、並列負荷関数を使用することもできます。これは、状況に応じて使用できます。次の各スクリプトは、シリアルロードを使用するために以前のスクリプトに依存することをお勧めします。そうしないと、並列接続を使用します。これは、原則として、並列接続はシリアル接続よりも高速であるためです。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。