jQuery - 加載多個文件，然後觸發事件

我想寫代碼，如果文件A，B和C加載，動畫發生。現在，我使用下面的代碼，但我想知道，如果沒有一個簡單的版本要做到這一點：jQuery - 加載多個文件，然後觸發事件

$(document).ready(function(){ 
    $("#file_A").load(function(){ 
     $("#file_B").load(function(){ 
      $("#file_C").load(function(){ 
      <!-- my animation script --> 
      }); 
     }); 
    });  
});

此代碼雖然，並沒有真正適用於所有情況。我想沿着線的東西：

$(document).ready(function(){ 
    $("#file_A, #file_B, #file_C").load(function(){ 
    <!-- my animation script --> 
    });  
});

基本上在哪裏我列出所有我要等待加載的文件和一旦結束，我開始我的動畫腳本。

非常感謝您的高級幫助！

來源

2013-12-15 stefanplc

$.when($("#file_A").load(function(){ <!-- only assignments --> }), 
     $("#file_B").load(function(){ <!-- only assignments --> }), 
     $("#file_C").load(function(){ <!-- only assignments --> }) 
).then(function{ <!-- all files loaded --> 
       <!-- my animation script --> });

來源

2015-03-19 18:23:49 Konstantin

有一種使用延遲對象和承諾的方法。

假設你有兩個dererred對象，def1和def2。然後，你可以使用以下sintax：

$.when(def1, def2).then(callback)

這意味着，一旦.resolve（）方法將被應用到deferreds，jQuery將執行回調。

$ .ajax它是一個defferred對象的例子。所以你可以在請求中設置type：get（將ajax請求轉換爲.load等效項），直接在$ .when指令中傳遞它們。

您不能直接使用.load（），因爲.load（）不會返回延遲對象，而是返回jQuery。

儘管如此，.load（）在它的sintax糖中有一個回調。所以我們可以利用它，做以下工作：

(function(){ 

    // We first create the deferreds 
    var def1 = $.Deferred(); 
    var def2 = $.Deferred(); 
    ... 
    var defN = $.Deferred(); 

    // Then asociate them to load endings, executing .resolve in callbacks 
    $('#1').load('path_to_file_1', function() {def1.resolve()}); 
    $('#2').load('path_to_file_2', function() {def2.resolve()}); 
    ... 
    $('#N').load('path_to_file_N', function(){defN.resolve()}); 

    // And finally we handle all .resolve() invocations at once. 
    $.when(def1, def1, ... , defN).done(function(){ 
     // Start your animation here. 
    });

}（））;

來源

2013-12-15 18:27:27 Viktor

非常感謝您的幫助！我沒有時間檢查這個工程是否還能正常工作（我想是這樣），但我會在今晚或明天最新的。再次感謝！順便說一句，當你創建延期的時候，你可能意思是defA，defB而不是def1 def2等等。 – stefanplc

是的，絕對的。從我的本地主機複製和粘貼時，我搞砸了。抱歉給你帶來不便！ – Viktor

我剛編輯過，以免誤解。 – Viktor

$.load(X, function() {$.load(Y, ...)});的一個主要問題是文件是按順序加載的。承諾允許瀏覽器並行加載文件。如果沒有承諾，您需要使用計數器，如：

var counter = 3; 
$.load(X, onComplete); 
$.load(Y, onComplete); 
$.load(Z, onComplete); 

function onComplete() { 
    if (--counter == 0) //start animation 
}

來源

2015-04-08 00:13:26

jQuery - 加載多個文件，然後觸發事件

回答

相關問題