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.

Answer 1

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.

Answer 2

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();