假设我们有一张幻灯片的图片.这些图片的缩略图显示在带有滑块(使用
Jquery创建)的div封装中,每个图像都包含在< li>与CSS背景设置,当然代表图像.我选择使用背景图像进行布局,因为它们的尺寸和宽高比都不同.
图像来自数据库,并且是动态创建的.
我想做的是：
在每个< li>上显示“加载”消息并等待背景(图像)加载到缓存中,然后用fadeIn显示.
他们只有我能想到的方式(不是我可以,因为我不太确定如何和如果它的可行)是：
>暂时取消每个< li>的背景设置同时显示“加载”消息
>为每个背景创建一个循环以获取图像网址
>使用$.get函数加载它,然后在加载后做任何我想要的
除了可行的事情之外,这意味着它们将按顺序加载,因此如果由于某种原因不能加载脚本永远不会继续！
我看到一些使用JS加载图像的网站只有在浏览器可见时才可以加载图片,也许这可能与我正在寻找的情况相同,因为我使用滚动条,只有一部分图像显示在一次和何时加载页面
解决方法
嗯,我觉得如果你只是使用img标签,可能会更简单,但是如果你想使用背景图片,那我只能想出一个工作.
诀窍是创建一个新的图像(使用the Javascript image object),并确保已加载,但此图像不显示.图像加载后,在缓存中,该图像将作为您的图库中的背景图像.
所以你要做的就是确保在相应的图像被加载之后,只改变图像的LI的背景图像.您最初可以使用默认的“加载”图像加载所有的LI.
所以你的代码将是这样的：
HTML(加载图像的样式定义可以在外部样式表中)：
<ul>
<li id="pic1" style="background-image:url('images/loading.gif')"></li>
<li id="pic2" style="background-image:url('images/loading.gif')"></li>
<li id="pic3" style="background-image:url('images/loading.gif')"></li>
...
</ul>
你的jQuery / Javascript：
var img = new Array();
// The following would be in some sort of loop or array iterator:
var num = [NUMBER] // You'd use this number to keep track of multiple images.
// You Could also do this by using $("ul>li").each() and using the index #
img[num] = new Image();
// Specify the source for the image
var imgSource = "http://yourimage.com/example.jpg";
// only append the corresponding LI after the image is loaded
img[num].onload = function() {
$("#pic" + num).attr("style","background-image:url('" + imgSource + "')");
};
img[num].src = imgSource;
您必须为每个LI拥有适当的CSS / ids等,并且您必须将上述内容适用于您用于显示您的图库的循环或函数.
Here’s a jsFiddle example.(为了测试目的,这是一个很大的图像,所以需要一段时间才能加载).