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");
};

duplicate: http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 — Marvin Emil Brach, Jun 24 '13 at 08:38

score 1 · Accepted Answer · answered Aug 26 '12 at 16:12

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.

answered Aug 26 '12 at 16:12

Peter

My initial idea was similar to this approach, however I was checking against the actual images on thier `complete` property upon one of the images loading. I prefer the idea of simply checking against the counter. It's nicer and less over-head. – Richard Aug 26 '12 at 16:20

score 0 · Answer 2 · answered Aug 26 '12 at 16:16

0

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

answered Aug 26 '12 at 16:16

nicosantangelo

2 Answers2