Question

我正在尝试编写代码，如果加载了文件A，B和C，则会发生动画。现在我正在使用以下代码，但我想知道是否有更简单的版本来执行此操作：

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

基本上我列出了我想等待加载的所有文件，一旦完成，我就开始动画脚本了。

非常感谢您提前获取任何帮助！

Answer 1

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

Answer 2

有一种使用延迟对象和承诺的方法。

让我们假设你有两个dererred对象，def1和def2。然后你可以使用以下sintax：

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

这意味着，一旦.resolve（）方法应用于两个延迟，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.
   });

}（））;

Answer 3

$.load(X, function() {$.load(Y, ...)});的一个主要问题是文件是按顺序加载的。 Promises 允许浏览器并行加载文件。如果没有承诺，您将需要使用计数器，例如：

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

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

jQuery - 加载多个文件然后触发事件

3 个答案: