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)
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:
incrementCounter functionincrementCounter will increment the counterHaving this code in a cross-browser way wouldn't be so hard, it's just cleaner like this.
