用于预加载一组背景图片的jquery

Question

我的google-fu在这一张上失败了。我有一个HTML页面的一系列像一个在其他HTML下面穿插的div：

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

我发现这些特征图像（realBrackground）没有被预装所以他们只加载时的标签显示它们出现。我真的很想做的事情是让jquery在页面呈现document.ready（）后将它们预先加载到背景中，以便当用户单击另一个选项卡时，特征图像的显示是即时的，但加载不会减慢初始页面显示。

我得出的jquery选择器是$(".featureImage > a").css("background-image")但我怎么能够编码，以便它会通过并找到所有的实例，并实际上预先加载页面渲染后的图像？

UPDATE：

我得到的答案从Preloading jquery images想通了帮助和jQuery Quick Tip: Extract CSS Background Image

的关键是，选择的CSS只适用于它找到的第一场比赛，这是已经给我适合。这是我想出来的，我很想有改进！

<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;博士：我有我的选择分成两个，并使用每个（）函数穿行并找到所有我想要的物品，提取的网址，并将它推到一个数组。在有了数组之后，之前的堆栈溢出答案让我完成了其余的任务。

Answer 1

我得到的答案从Preloading jquery images和jQuery Quick Tip: Extract CSS Background Image

想通了提供帮助的关键是，选择的CSS只适用于它找到的第一场比赛，这是一直让我适合。这是我想出来的，我很想有改进！

<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;博士：我有我的选择分成两个，并使用每个（）函数穿行并找到所有我想要的物品，提取的网址，并将它推到一个数组。在有了数组之后，之前的堆栈溢出答案让我完成了其余的任务。

Answer 2

链接http://thinkpixellab.com/pxloader/

这个库实际的前负荷的图像。

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