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（）函数遍历并找到我想要的所有项目并提取网址并将其推入数组。在我获得数组之后，之前的堆栈溢出答案让我完成剩下的工作。

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（）函数遍历并找到我想要的所有项目并提取网址并将其推入数组。在我获得数组之后，之前的堆栈溢出答案让我完成剩下的工作。

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

2 个答案: