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

Question

I would like to create a lean and medium gallery of images, with thumbnails displayed in a row. I would like them to not go into the windows at boot time, I would like them to just pop up or, if there is a way to detect their completion, use the jQuery effect, for example, fast fadeIn ().

I imagine a line of code like:

$ ("thumb-image.") WhenLoaded (FadeIn (500)) ;.

But is there such an event? What did he call?

Answer 1

Use the loadevent:

JQuery

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

or vanilla javascript:

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

load , DOM, , ..