Question

i need a way to preload background images, either by vanilla JS or jQuery. I am using pure CSS3 bg gallery, which is an ordinary ul, and each li represents full bg image.

There are no img tags, each li uses css background-image property. I have four galleries, and each one is loaded by AJAX on request.

If someone could point to some example, or some script which would help me preload images for each gallery, so when the gallery is loaded, the images are already preloaded.

You can see the test site at http://www.madebym.net/test/index.html

Only the first set of links is working, and each one points to new gallery.

Answer 1

I have a global utility function that I use to handle any image preloads (you can pass an Array of images to it).

    $.preloadImages = function () {
        for (var i = 0; i < arguments.length; i++) {
            $('<img>').attr('src', arguments[i]);
            // For testing purposes: 
            //console.log('\n\u2713 Successfully Preloaded Image :: ');
            //console.log($('<img>').attr('src', arguments[i]));
        }
    }

Useage would be:

    $.preloadImages('test.jpg', 'test2.jpg'); // put all your images in there

But basically you are just creating a blank $('img'). Hope that helps!