jquery for preloading a set of background-images

Question

My google-fu is failing me on this one. I have an html page with a series of divs like the one below interspersed among other html:

<div class="featureImage" style="background-image:url('defaultBackground');">
<a href="linkHere" style="background:url('realBackground') no-repeat center center;"> </a>
</div>

I find that these feature images (realBrackground) are not being preloaded so they only load up when the tab that displays them shows up. What I'd really like to do is have jquery preload them in the background after the page is rendered document.ready() so that when the user clicks on another tab the display of the feature image is instantaneous, but the load won't slow down the initial page display.

The jquery selector I got worked out was $(".featureImage > a").css("background-image") but how could I code that up so that it would go through and find all instances of that, and actually preload the image after the page has rendered?

UPDATE:

I got the answer figured out with help from Preloading jquery images and jQuery Quick Tip: Extract CSS Background Image

The key was that the .css selector only works on the first match it finds, which is what had been giving me fits. Here is what I came up with, I would love to have improvements!

<script>

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
}
for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
}
}
jQuery(document).ready(function() {

       var items = new Array();
       $(".featureImage > a").each(function() {
       items.push(extractUrl($(this).css("background-image")));});
       preloadImages(items);

});
</script>

tl;dr: I Had to break my selector into two and use the each() function to walk through and find all the items I wanted and extract the urls and push it into an array. After I had the array, previous stack overflow answers got me the rest of the way.

Possible duplicate of [Preloading jquery images](http://stackoverflow.com/questions/9847012/preloading-jquery-images/9847168#9847168) and [Image preloader javascript](http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310) and [Is there a way to load images to user's cache asynchronously?](http://stackoverflow.com/questions/8450068/is-there-a-way-to-load-images-to-users-cache-asynchronously/8450190#8450190). — jfriend00, Jun 19 '12 at 04:57

score 4 · Answer 1 · answered Jun 19 '12 at 05:12

Link http://thinkpixellab.com/pxloader/

This library actually pre loads the images.

//core file
<script type="text/javascript" src="js/PxLoader.js"></script>

// Create the loader and queue our 3 images. Images will not 
// begin downloading until we tell the loader to start. 

var loader = new PxLoader(), 
backgroundImg = loader.addImage('images/headerbg.jpg'), 
treesImg = loader.addImage('images/trees.png'), 
ufoImg = loader.addImage('images/ufo.png'); 


// callback that will be run once images are ready 
loader.addCompletionListener(function() { 
var canvas = document.getElementById('sample1-canvas'), 
    ctx = canvas.getContext('2d'); 

ctx.drawImage(backgroundImg, 0, 0); 
ctx.drawImage(treesImg, 0, 104); 
ctx.drawImage(ufoImg, 360, 50); 
}); 



// begin downloading images 
 loader.start();

Thanks for your answer! Preload was probably the wrong word. Postload is actually what I want, and the part I'm currently having trouble with is how to go through the dom that has been loaded and get a list of the urls to load up. So assuming I was using pxloader, the part I'm currently stuck on is how to dynamically do this for each background-image that matches the selector I gave in the question: `backgroundImg = loader.addImage('images/headerbg.jpg'), ` `treesImg = loader.addImage('images/trees.png'), ` `ufoImg = loader.addImage('images/ufo.png');` — UltraBob, Jun 19 '12 at 06:18

score 2 · Accepted Answer · edited May 23 '17 at 12:18

I got the answer figured out with help from Preloading jquery images and jQuery Quick Tip: Extract CSS Background Image

The key was that the .css selector only works on the first match it finds, which is what had been giving me fits. Here is what I came up with, I would love to have improvements!

<script>

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url\(|\)$/ig, "");
}

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
    preloadImages.cache = [];
}
for (var i = 0; i < list.length; i++) {
    img = new Image();
    img.src = list[i];
    preloadImages.cache.push(img);
}
}
jQuery(document).ready(function() {

       var items = new Array();
       $(".featureImage > a").each(function() {
       items.push(extractUrl($(this).css("background-image")));});
       preloadImages(items);

});
</script>

tl;dr: I Had to break my selector into two and use the each() function to walk through and find all the items I wanted and extract the urls and push it into an array. After I had the array, previous stack overflow answers got me the rest of the way.

but this solution does not notify the browser / JS whether the images finished loading or not. — Raptor, Feb 09 '14 at 13:43
For me that wasn't crucial, I don't take any action on completion of the load, I just want them to be waiting for when a user clicks and reveals them. If you have a solution that does notify the browser, I'd love to see it and learn how that is done. — UltraBob, Feb 10 '14 at 00:28

jquery for preloading a set of background-images

2 Answers2