Question

There is a div #container which contains various divs with large background images,

I want to use some Pre-Image loading js for avoiding the ugly look of loading image.

But the problem is that I can’t find any script which loads all images in background and instead in #container display a loading bar.

Though Internet is full of scripts which loads images for whole body but I want just for an element meanwhile everything else is visible such as content.

UPDATED Question:
Would the following script work for the background images specified in CSS?

$('#container img:last').load(function(){ 
  //do stuff
});

UPDATE:Best solution is get hold of this jQuery plugin, its called “preloadCssImages”. You can find it here.

It pre loads all the css images present without even bothering to do this all stuff.

Answer 1

You can wait for the last image in the container to load then perform your actions.
so something like this

$(‘#container img:last’).load(function(){
//do stuff
});