jQuery - load multiple files and then trigger an event

Question

I'm trying to write code where if File A, B and C are loaded, an animation occurs. Right now I'm using the following code, but I was wondering if there isn't a simpler version to do this:

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

This code though, doesn't really work for all situations. I would like something along the lines:

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

Where basically I list all of the files I want to wait for to load and once that finishes, I start my animation script.

Thank you very much in advanced for any help!

Konstantin · Accepted Answer · 2015-03-19 18:23:49Z

7

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

answered Mar 19, 2015 at 18:23

Konstantin

3,7142 gold badges35 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viktor · Accepted Answer · 2013-12-16 16:14:45Z

1

There is a way using Deferred objects and promises.

Let's asume you have two dererred objects, def1 and def2. Then you could use the following sintax:

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

Which mean, that once the .resolve() method would be applied to both deferreds, jQuery will execute the callback.

$.ajax it's an example of a defferred object. So you could set type:get (which converts the ajax request into a .load equivalent) on the request an passed them directly in $.when instruction.

You cannot do the same using .load() directly, because .load() does not return a deferred object, but jQuery.

Despite of that, .load() have a callback in its sintax sugar. So we can take advantage of it, doing the following:

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

}());

edited Dec 16, 2013 at 16:14

answered Dec 15, 2013 at 18:27

Viktor

654 bronze badges

2 Comments

stefanplc Over a year ago

Thank you very much for your help! I haven't had time to check if this works yet (I imagine it does) but I will tonight or tomorrow the latest. Thanks again! Btw, when you create the deferrends you probably meant defA, defB instead of def1 def2 and so forth right?

Viktor Over a year ago

Yes, absolutly. I messed up when copy & paste from my localhost. Sorry for the inconvenience!

Sarsaparilla · Accepted Answer · 2015-04-08 00:13:26Z

0

One major problem with the $.load(X, function() {$.load(Y, ...)}); is that the files are loaded sequentially. Promises allow the browser to load the files in parallel. Without promises you'll need to use a counter, like:

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

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

answered Apr 8, 2015 at 0:13

Sarsaparilla

6,7601 gold badge35 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery - load multiple files and then trigger an event

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related