css背景图像预加载器

我有麻烦制作工作预加载器为CSS背景图像。这里是情况：我有几个隐藏的元素，每个都有一个CSS背景图像。css背景图像预加载器

当用户点击一个“开始”按钮，然后我使用jquery显示元素（一个接一个：如一个显示，另一个隐藏）。但是，只有在加载完所有图像后才能使用“开始”按钮。

我使用这个预载：

function preloadimages(arr) { 
    var newimages=[], loadedimages=0 
    var postaction=function(){} 
    var arr=(typeof arr!="object")? [arr] : arr 

    function imageloadpost() { 
     loadedimages++ 
     if (loadedimages == arr.length) { 
      postaction(newimages) //call postaction and pass in newimages array as parameter 
     } 
    } 

    for (var i=0; i<arr.length; i++) { 
     newimages[i] = new Image() 
     newimages[i].src = arr[i] 
     newimages[i].onload = function() { 
      imageloadpost() 
     } 

     newimages[i].onerror = function() { 
      imageloadpost() 
     } 
    } 

    return { //return blank object with done() method 
     done:function(f) { 
      postaction = f || postaction //remember user defined callback functions to be called when images load 
     } 
    } 
} 

preloadimages('img01','img02','img03') 
    .done(function(images) { 
     alert(images.length + " images loaded"); 
    });

然而，这仅加载1图像。

我尝试了一些其他的代码，没有结果。图像预加载器应该在css背景图像上工作吗？或者它们仅用于标签？

来源

2013-02-03 DavidTonarini

有一个非常好的纯CSS解决方案用于预加载我认为可以帮助您的背景图片。其背后的概念是将背景图像放置在页面加载但未显示时加载的伪元素上。这会导致浏览器加载图像，以便稍后用另一个元素调用它们时，它们就准备好了。下面是一些示例代码：

.main-element { 
    background-image: url(your_url_here); 
} 
.main-element:after { 
    display: none; 
    content: url(your_url_here), url(another_url_here), url(another_url_here), etc. 
} 
.hidden-element { 
    display: none; 
    background-image: url(your_url_here); 
} 
.main-element:hover { 
    .hidden-element: display: block; 
}

这里有一个链接到一篇有关这一技术的详细信息：http://www.thecssninja.com/css/even-better-image-preloading-with-css2

来源

2013-02-03 10:38:39 DMTintner

看起来不错，但我无法得到它的工作。可能是因为我仍然需要javascript/jquery根据用户的用途来显示元素？无论如何，图像仍然加载后.show（）执行 – DavidTonarini

这完全没问题，它应该仍然工作，并与您用来显示元素的任何方法无关。无论如何，图像实际上都被加载到完全独立的元素（伪元素）上。我只是使用jquery show（）或jquery addClass（）为要显示的元素提供一个类，然后显示它的样式：block; – DMTintner

我得到它的工作！这是一个非常简单的jQuery解决方案：

$(".hidden-element").show(); $(".hidden-element").hide();

这不是由用户检测，似乎仍然强制浏览器加载图像我仍然无法加载完成后使用回调，但这项工作在ratice

来源

2013-02-03 13:42:12 DavidTonarini

这是很多不必要的处理，而不是处理此问题的非常有效的方法。你的目标应该是保持你的代码干爽，并且因为你要再次调用show（）或toggle（）来与你想交互的元素，在这里重复自己只是为了加载图像。 – DMTintner

css背景图像预加载器

回答

相关问题