jquery 用于预加载一组背景图像

Question

我的 google-fu 在这方面让我失望了。我有一个 html 页面，其中包含一系列 div，如下所示，散布在其他 html 中：

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

我发现这些特征图像 (realBrackground) 没有被预加载，因此它们仅在显示它们的选项卡出现时才会加载。我真正想做的是在页面呈现 document.ready() 后让 jquery 在后台预加载它们，这样当用户单击另一个选项卡时，特征图像的显示是瞬时的，但负载不会减慢初始页面显示速度。

我得到的 jquery 选择器是 $(".featureImage > a").css("background-image")，但我怎样才能对其进行编码，以便它能够通过并找到所有实例，并在页面呈现后实际预加载图像？

更新：

我在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;dr：我不得不将我的选择器分成两部分并使用 each() 函数遍历并找到我想要的所有项目，然后提取 url 并将其推送到数组中。在我拥有数组之后，之前的堆栈溢出答案让我完成了剩下的工作。

Answer 1

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

Answer 2

我在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;dr：我不得不将我的选择器分成两部分并使用 each() 函数遍历并找到我想要的所有项目，然后提取 url 并将其推送到数组中。在我拥有数组之后，之前的堆栈溢出答案让我完成了剩下的工作。