4

我的 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 并将其推送到数组中。在我拥有数组之后，之前的堆栈溢出答案让我完成了剩下的工作。

4

2 回答 2

4

链接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();
于 2012-06-19T05:12:37.443 回答
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 并将其推送到数组中。在我拥有数组之后，之前的堆栈溢出答案让我完成了剩下的工作。

于 2013-02-08T04:39:56.967 回答