Question

I have a slider which keeps animating the background images.The background images are being applied to the body element of the page i.e it takes the full size of the page.

This animation is seen on the home page… there are total 10 images in the slider which are fetched from the database.

My question is how should I preload these images since most of these images are more than 200-300KB in size.The jquery preload needs a static array of image names, but while loading I don’t knew their names.

So can you guys help me to preload these dynamic images?

Answer 1

Here is a simple script which helps to load images before hand using javascript.

    $.each(data, function(index, item) {
        var tempImage = new Image();
        tempImage.src = item.url;
        preloadedImages.push(tempImage);
    }


where data as an array of image data 
data=
{
   name:'NameofImage',
   url:'http://www.website.com/image1.jpg',
}

To display the images you can simply add the images to the DOM

 $("img").attr({
                src: item.src
            }).appendTo("#target");

I have a simple jsfiddle which demonstartes the script. It takes data from an ajax request and pre-loads the images. When the user does a mouseover the target it attaches the image to the DOM.

Below is the screenshot showing the images are being loaded at the time the page gets loaded:

this reference link argues that images loaded in div which are hidden might not be pre-loaded in some of the browsers like Opera. I thought haven’t verified it.

There might be other ways to load images using css if you do not want to use javascript

Hope this helps