JavaScript を使用してスクリプトをロードし、コールバックを実行する方法の詳細な説明 コード例

3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素を動的に作成し、その src 属性を変更してスクリプトをロードできますが、一部の関数はスクリプトのロード後に実行を開始する必要があるため、スクリプト ファイルがロードされたことをどのように確認すればよいでしょうか。そして発効します。 IEブラウザでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a要素のonreadystatechangeを使用して読み込み状態の変化を監視し、readyStateが読み込まれているか完了しているかを判断することで、スクリプトが読み込まれているかどうかを判断できます。 IE 以外のブラウザでは、onload を使用して、スクリプトが読み込まれているかどうかを直接判断できます。

簡単な実装プロセスは次のようになります:

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

原理は非常に単純で、これら 2 つの単純な原則に基づいて、シリアル読み込みスクリプトと並列読み込みスクリプトといういくつかの変更を加えます。

複数のJSファイルパスを含む配列が渡された場合、シリアルロード関数は最初のスクリプトファイルのロードから開始され、すべてのロードが成功するたびに次のスクリプトファイルのロードを開始し、コールバック関数が実行されます。並列ロードでは、すべてのスクリプト ファイルが最初からロードされます。つまり、すべてのロードが完了すると、コールバック関数が実行されます。

テストの結果、これら 2 つの機能は現在の主流ブラウザーすべてと互換性があります。

/** 
 * 串联加载指定的脚本
 * 串联加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @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]);
  }
}

ここでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグがページの 93f0f5c25f18dab9d176bd4f6de5d30e タグに動的に挿入され、読み込みが完了するとタグ要素が自動的に削除されます。
注意して見ると、ここでは、条件付きコンパイルが非 IE ブラウザであるかどうかを判断する式 (!/*@cc_on!@*/0) として使用されていることがわかります。この記事の焦点は、興味があれば、オンラインで関連情報を検索して学ぶことができます。

これら 2 つの関数の使用方法: ここでは、2 つのリモート JS ファイル アドレスを含む配列変数を宣言します (もちろん、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ呼び出しスクリプトはクロスドメインをサポートしています):

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

使用される関数もちろん、これは状況に応じて使用できます。それ以外の場合は、次のスクリプトに依存関係を持たせることをお勧めします。 、原則として並列接続は直列接続よりもはるかに高速であるため、並列接続を使用します。

以上がJavaScript を使用してスクリプトをロードし、コールバックを実行する方法の詳細な説明 コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。