jQuery image preload

Question

I got a web application, in which there are some images.

Will show a overlay in my page at start and that will automatically fadeout on all images loades.

I need something like this

its rough code

var image1="image1.jpg";
var image2="image2.jpg";
var image4="image4.jpg";

image1 & image2 & image4 loaded then fadeout #preload and show content.

Please help me ... I tried this .. but not working ..

var img1 = new Image();
img1.src = "../images/wall.jpg";

img1.onload = function() {
    alert("loaded");
};

Answer 1

var images_loading = $('img').length;
$('img').load(function(){
  if(!--images_loading) {
    // all images loaded
  }
});

Please mind you can't use display:none to hide images.

Using display:none will block image download by your browser. User visibility:hidden instead.

Answer 2

Try this fiddle. I've made it using mostly raw javascript.

If you want, you could use jQuerys .load to replace the onload function, and append to replace appendChild