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.
Comments
No comments so far. Write one.