Question

Having read other people’s questions I thought

window.onload=...

would answer my question. I have tried this but it executes the code the instant the page loads (not after the images load).

If it makes any difference the images are coming from a CDN and are not relative.

Anyone know a solution? (I’m not using jQuery)

Answer 1

Here is a quick hack for modern browsers:

var imgs = document.images,
    len = imgs.length,
    counter = 0;

[].forEach.call( imgs, function( img ) {
    if(img.complete)
      incrementCounter();
    else
      img.addEventListener( 'load', incrementCounter, false );
} );

function incrementCounter() {
    counter++;
    if ( counter === len ) {
        console.log( 'All images loaded!' );
    }
}

Once all the images are loaded, your console will show “All images loaded!”.

What this code does:

• Load all the images in a variable from the document
• Loop through these images
• Add a listener for the “load” event on each of these images to run the incrementCounter function
• The incrementCounter will increment the counter
• If the counter has reached the length of images, that means they’re all loaded

Having this code in a cross-browser way wouldn’t be so hard, it’s just cleaner like this.