wait until images in background (css) are loaded

Question

Let\'s say we have a slideshow of pictures. the thumbnails of those pictures are showed in div wrapper with a slider (that I created with Jquery) and each image is included

Answer 1

Well, I think things may be simpler if you just use img tags, but if you do want to use background images then I could only come up with a work around.

The trick is to create a new image (using the Javascript image object), and make sure it's loaded, but this image isn't displayed. Once the image is loaded and in the cache, that image will be available as a background image in your gallery.

So, all you have to do is make sure that you only change the background image of the LI of an image after the corresponding image is loaded. You can load all LIs with a default "loading" image initially.

So your code would be something like:

HTML (the style definitions for the loading image could be in your external style sheet):

...

Your jQuery / Javascript:

var img = new Array();

// The following would be in some sort of loop or array iterator:

var num = [NUMBER] // You'd use this number to keep track of multiple images.
  // You could also do this by using $("ul>li").each() and using the index #

img[num] = new Image();

  // Specify the source for the image
var imgSource = "http://yourimage.com/example.jpg";

  // only append the corresponding LI after the image is loaded
img[num].onload = function() {
    $("#pic" + num).attr("style", "background-image:url('" + imgSource + "')");
};

img[num].src = imgSource;​

You would have to have the appropriate CSS / ids etc for each LI, and you would have to adapt the above to the loop or function you use to show your gallery.

Here's a jsFiddle example. (for testing purposes it's a big image, so it takes a while to load).