0

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.

Improve this question
1

1 Answer 1

Reset to default
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!

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Thanks, but i am not using any img tags. I need a way to preload li element which uses css background-image property.
These images aren't placed on the page, but the image will be preloaded into your cache, so once you put them in the <li> elements, they will appear instantly
Not sure if i got you right...images will not appear on the page, but since they are cached they will be used by background-size property?
Oh no, I just meant they are cached, you can now load them set them as the li background-image etc without worrying about them loading
I'd probably put this in some file that's on all the pages, then put your array of images inside it, boom.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.