用於預加載一組背景圖片的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();