Wait Until All Images Have Finished Loading

If your JavaScript function should be fired once all images in a container have finished loading, the implementation sounds easy. In fact, it is easy. I use MooTools for the explanation.

var container = $('container');
var tempImageResponse = 0;

The tempImageResponse variable contains the number of images which finished loading.

Let’s hide the container and fade it in when all images have finished loading.

container.setStyle('opacity', 0);

Now here comes the tricky part. The each function goes through all images inside the container.

container.getElements('img').each(function(e){
    e.addEvent('load', function(){
        tempImageResponse++;
        if (tempImageResponse == container.getElements('img').lengts) {
            object.morph({'opacity': 1});
        }
    }.bind(this));
}.bind(this));

Each image recieves an onload function which does two things: It increments the tempImageResponse variable by 1. And it checks if the variable value is the same as the getElements('img') array length … which would mean that all images finished loading and the code can be executed.

Januar 13 · 13:24

Tags:

Return to the blog

Comments

No comments so far. Write one.