load Div background images in cache

Question

i am working on imageSlider,i have taken div and setting background-image of div. on Page load background page takes lots of time to load image. is there any way to load all background image first in cache and once loaded i can show main Div ..

i am reading xml file and then setting background-image of div one by one .

$('#myImageFlow').append('<div id="id'+k+'" alt="div'+k+'" class="sliderImage" width="280" height="310" style="visibility:hidden"> <div class="ffrontText" id="ff'+k+'">'+frontDiv[k]+'</div><div class="borderdiv" id="b'+k+'"></div><div class="borderdiv1" id="bd'+k+'"></div><div class="reflection" id="ref'+k+'"></div>  <div class="overlay" id="o'+k+'"></div></div>');

Any suggestion .

enter image description here

@Archer i am not working with img .. i want to set div background image — anam, Jul 15 '13 at 11:33
I know, but it's cached exactly the same, regardless of how you use it, so loading it first as an image element and then showing the page will work. Preloading is preloading, regardless :) — Reinstate Monica Cellio, Jul 15 '13 at 11:37

score 0 · Answer 1 · answered Jul 15 '13 at 11:42

You can create a function with two parameters (image source array and callback), And call the callback function after all images loaded.

Example:

preload_images = function(images, callback) {
    var images_count = images.length;
    var loaded_count = 0;
    $.each(images, function(index, src) {
        var image = $('<img src="' + src + '">');
        image.load(function() {
            loaded_count++;
            if (loaded_count == images_count && callback) {
                callback();
            }
        });
    });
}

preload_images(['1.jpg', '2.jpg', '3.jpg'], function() { // pass background images in array
    console.log('background images preloaded');
    // Show main div
});

load Div background images in cache

1 Answers1