Javascript - wait images to be loaded

Question

var l = false;
var l2 = false;

var imm = new Image();
imm.src = \"b.png\";

imm.onload = function(){
l = true;
}

var imm2 = new Image();
imm2.src = \"c.png\";

imm         


        

Answer 1

you don't have to constantly check, just check the other each time one finishes, that way, when the second is done your function will fire, and you will only have had to "check" once. var l = false; var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
l = true;

if (l2)
   call yourFunction();

}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
l2 = true;

if (l)
   call yourFunction();
}

Answer 2

More elegant way in my opinion:

var loadedImagesCount = 0;
var imageNames = ["b.png", "c.png"];
var imagesArray = [];
for (var i = 0; i < imageNames.length; i++) {
    var image = new Image();
    image.src = imageNames[i];
    image.onload = function(){
        loadedImagesCount++;
        if (loadedImagesCount >= imageNames.length) {
            //loaded all pictures
        }
    }
    imagesArray.push(image);
}

Instead of messing with lots of different image variables, just store the image names in plain array then loop over this and count how many pictures are loaded.

Answer 3

If these are the only 2 times throughout your entire script that l and l2 are set, then you can check after setting the values.

var l = false;
var l2 = false;

var imm = new Image();
imm.src = "b.png";

imm.onload = function(){
  l = true;
  if (l && l2) {
    myFunc();
  }
}

var imm2 = new Image();
imm2.src = "c.png";

imm2.onload = function(){
  l2 = true;
  if (l && l2) {
    myFunc();
  }
}

function myFunc(){
  //do stuff
}

Answer 4

Here is a generic one (works with any number images)

function preload( images, callback){
   var imageElements = [],
       counter = images.length,
       lfunc = function(){if (--counter === 0 && callback) callback(imageElements);};

   // first create the images and apply the onload method
   for (var i = 0, len = images.length; i < len; i++){
      var img = new Image();
      imageElements.push( img );
      img.onload = lfunc;
      img.src = images[i];
   }
}

function codeOncePreloadCompletes(preloadedImages){
  // Do whatever you want here
  // images are preloaded
  // you have access to the preloaded image if you need them
  // with the preloadedImages argument
}

// USAGE

preload( ['b.png', 'c.png'], codeOncePreloadCompletes);

// OR

preload( ['b.png', 'c.png'], function(preloadImages){
   // write directly here what to do after preload
});

Answer 5

If you want to load images in order, from a given list of URLs, then I find this to be useful:

preloadImages_helper("firstURL", "secondURL");

    function preloadImages_helper(){
        var args =  Array.prototype.slice.call(arguments);
        if(!(args === undefined) && args.length > 0){
            var img = new Image();
            img.src = arguments[0];
            img.onload = function(){
                preloadedImages.push(img);
                console.log("pushing image");
                //Don't forget to call user code!
                if(!(args === undefined) && args.length > 1){
                    args.shift();
                    preloadImages_helper.apply(this, args);
                }
                else{
                    console.log("finished loading images");
                    userCode();
                }
            };
        }
    }

Answer 6

No need for loops. You could let them call a function that checks if l and l2 are true and perform the thing you want to do:

var onLoaded = function() {
    if (l && l2) {
        // do your stuff
    }
}

imm.onload = function(){
    l = true;
    onLoaded(); // call to onLoaded
}

imm2.onload = function(){
    l2 = true;
    onLoaded(); // call to onLoaded
}

It is basically a simpler form of the Observer Pattern. There are jQuery plugins such as Radio.js that encapsulate this for you.