Question

I would like to do an animation with the images, but only when they are all loaded.
When I start the animation with images still loading, it looks bad.

The images are dynamically added to the dom by parsing a json requested by javascript on $(document).ready.

After the images are loaded I would like to get a callback.

my core code is like this:

$('.gallery-block').each(function () {
    $.ajax({
        url: $(this).data("url"),
        dataType: 'json',
        outerthis: this,
        success: function (json) {
            $(this.outerthis).data("json", json);
            var i = json.length;
            while (i--) {
                var preload = new Image();
                preload.src = json[i];
            }
            $(this.outerthis).data("loaded", "true");
        }
    });
});

As you can see I’m trying to preload the images, but I don’t know how fickle they are this way. They are not attached to the dom or anything.

The other problem is that I wnat the line

$(this.outerthis).data("loaded", "true");

only to be executed when the images are really preloaded.

Should I iterate a variable on every image’s callback?

And probably this.outerthis is a bad design pattern, but I’m new to javascript.

Answer 1

The images don’t need to be connected to the DOM to be loaded. What you can do is hook up an onload event to each image (before you set the URL), which will acts as your callback. Just count up the number of responses to onload and you can figure out when they’re all loaded.

Something like this (untested):

var i, image,
    preload = [], loaded = 0, 
    images = ["a", "b"], count = images.length;

for(i = 0; i < count; i++) {
    image = new Image();
    image.onload = onImageLoaded;
    image.src = images[i] + ".jpg";
    preload[i] = image;
}

function onImageLoaded() {
    loaded++;
    if(loaded === count) {
       alert("done");
    }
}