1

2つのJSファイルをロードしています。1つにはJqueryを含む多くのプラグインが含まれています。'ready（）'JQuery関数は2番目のファイルにあります。

コード：

   function downloadJSAtOnload() {

       var element = document.createElement("script");
       element.src ='<%= deferJsAll %>';
       document.body.appendChild(element);

      // second JS file load with isReady goes here
   }

   // Check for browser support of event handling capability
   if (window.addEventListener)
       window.addEventListener("load", downloadJSAtOnload, false);
   else if (window.attachEvent)
       window.attachEvent("onload", downloadJSAtOnload);
   else window.onload = downloadJSAtOnload;

2番目のファイルもロードするとわかります（コード内のコメントを参照）。

問題は、実行の順序を制御できないことです。それでも、JQueryがロードされる前に「ready（）」が実行され、エラーが発生します。読み込みの延期を使用して、Jqueryファイルが最初に読み込まれ、次に2番目が実行されることを確認するオプションはありますか（ready（）関数を使用するもの）？

CDN、gzip、またはプレーンテキストのJSファイルから提供するファイルを決定しているため、「<％= deferJsAll％>」を使用しています。

進捗状況：私はただ置くことを考えました：

var elementApp = document.createElement("script");
elementApp.src = 'js/app.js';
document.body.appendChild(elementApp);

最初のドキュメントの最後に。したがって、最初のドキュメントの読み込みが完了すると、2番目の依存するJSコードがドキュメントの本文に埋め込まれます。いい考えだと思いますか？

4

2 に答える 2

2

onloadおよびonreadystatechange（IEの場合）を使用して、スクリプトのロードが終了したことを検出できます。

function loadScript(callback){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '<%= deferJsAll %>';
  document.body.appendChild(script);

  // exit on jQuery load.
  script.onload = function(){ callback(); };
  script.onreadystatechange = function() {
    if (this.readyState == 'complete') callback();
  }
}


loadScript(function(){
  $.getScript('<% jquery-dependent.js %>', function(){
     // jquery-dependent.js is loaded
  }
});
于 2012-07-05T01:34:09.103 に答える
1

ページに変数が存在するまで待つ必要があるときに使用したソリューションを次に示します。名前 (たとえば、任意の深さのjQuery名前空間twttr.widgets) と他の自明の属性を取ります。Facebook と Twitter のウィジェットが読み込まれるまで待つ必要があるときは、 http: //www.vitalmtb.com/ で本番環境で動作します。

// Wait till JS object is loaded. It can be a chanined variable name.
window.whenAvailable = function (name, callback, interval, max_wait) {
    interval || (interval = 50); // ms
    max_wait || (max_wait = 5000); // ms
    var timer,
        findVarByName = function(name) {
        var index = 0,
            parts = name.split('.'),
            result = window;

        index = 0;
        try {
            while (typeof result !== "undefined" && result !== null && index < parts.length) {
                result = result[parts[index++]];
            }
        }
        catch (e) {}
        if (index < parts.length || (typeof result == 'undefined' && result === undefined)) return false;
        else return true;
    };

    timer = window.setTimeout(function() {
        if (findVarByName(name)) {
            return callback();
        } else {
            window.setTimeout(arguments.callee, interval);
        }
    }, interval);

    window.setTimeout(function() {
        clearTimeout(timer);
    }, max_wait);
}

使用する：

whenAvailable('FB', $j.spotlights.a.show_social_buttons);
whenAvailable('twttr.widgets', $j.spotlights.b.show_social_buttons);
于 2012-07-05T01:40:20.787 に答える