What's the best way to prevent a browser from displaying images until they are fully loaded?

Question

I would like to set up a lean and mean image gallery, with thumbnails displayed inline. I'd like them not to windowshade in while loading, I'd like them to simply pop up or, if there's a way to detect their completion, use a jQuery effect like a quick fadeIn().

I imagine a line of code like:

$(".thumb-image").whenLoaded(fadeIn(500));

But is there such an event? What's it called?

Answer 1

Use the load event:

jQuery:

$(window).load(function(){
  // your code for images....
});

Or Vanilla JavaScript:

window.onload = function(){
  // your code for images....
};

The load event fires after all images, DOM, external resources, frames, etc have loaded.