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

我的谷歌fu在这一点上让我失望。我有一个html页面，其中包含一系列div，如下所示，这些div散布在其他html中：

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

tl；dr：我必须将选择器分成两部分，使用each（）函数遍历并找到我想要的所有项目，提取URL并将其推送到数组中。在我得到数组后，前面的堆栈溢出回答让我完成了剩下的工作。

Link

这个库实际上预加载了图像

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

//核心文件
//创建加载程序并将我们的3个图像排队。图像将不会
//开始下载，直到我们告诉加载程序开始。
var loader=new PxLoader（），
backgroundImg=loader.addImage（'images/headerbg.jpg'），
treesImg=loader.addImage（'images/trees.png'），
ufoImg=loader.addImage（'images/ufo.png'）；
//图像准备就绪后将运行的回调
loader.addCompletionListener（函数（）{
var canvas=document.getElementById（'sample1-canvas'），
ctx=canvas.getContext（'2d'）；
ctx.drawImage（backgroundImg，0,0）；
ctx.drawImage（treesImg，0104）；
ctx.drawImage（ufoImg，360，50）；
}); 
//开始下载图像
loader.start（）；

在和的帮助下，我找到了答案

关键是.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>

<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>

函数提取URL（输入）
{
//删除引号和换行url（）
返回input.replace（/“/g，”）.replace（/url\（|\）$/ig，”）；
}
函数预加载图像（列表）{
var-img；
如果（！preload-images.cache）{
preload images.cache=[]；
}
对于（变量i=0；ia”）。每个（函数（）{
push（extractUrl（$（this.css（“背景图像”））；}）；
预加载图像（项目）；
});

---

tl；dr：我必须将选择器分成两部分，并使用each（）命令函数遍历并找到我想要的所有项目，提取URL并将其推送到数组中。在我得到数组后，以前的堆栈溢出回答让我完成了剩下的工作。

可能与and重复。感谢您的回答！Preload可能是个错误的词。Postload实际上是我想要的，也是我当前使用的部分遇到的问题是如何遍历已加载的dom并获取要加载的URL列表。因此，假设我使用的是pxloader，我目前一直关注的部分是如何为每个与我在问题中给出的选择器匹配的背景图像动态执行此操作：

backgroundImg=loader.addImage（'images/headerbg.jpg'）），

treesImg=loader.addImage（'images/trees.png'），

ufoImg=loader.addImage（'images/ufo.png'））；

但此解决方案不会通知浏览器/JS图像是否已完成加载。对我来说，这并不重要，加载完成后我不会采取任何行动，我只希望它们等待用户单击并显示它们。如果您有一个解决方案通知浏览器，我很乐意看到它并了解它是如何实现的一