等到后台(css)中的图像被加载

Question

假设我们有一张图片幻灯片.这些图片的缩略图显示在div包装器中,带有一个滑块(我用Jquery创建),每个图像都包含在<li>一个CSS背景集中,当然代表图像.我选择使用背景图像作为布局问题,因为它们的大小和宽高比都不同.

图像来自数据库并动态创建.

我想做的是:

在每个上显示"加载"消息<li>并等待,直到后台(图像)加载到缓存中,然后用fadeIn显示它.他们只有我能想到的方式(不是因为我不能确定如何以及它是否可行)是:

• 暂时取消设置背景,<li>同时显示"加载"消息
• 为每个背景制作一个循环以获取图像网址
• 使用$ .get函数加载它,然后在加载后执行我想要的任何操作

除了可行的事情,这意味着他们将按顺序加载,所以如果由于某种原因不会加载脚本将永远不会继续!

我已经看到一些使用JS加载图像的网站只有在浏览器可见的情况下加载图像时,这可能与我正在寻找的情况相同,因为我使用的是滚动条,只有部分图像显示在一旦页面加载

Answer 1

好吧,我认为如果你只是使用img标签,事情可能会更简单,但如果你确实想要使用背景图像,那么我只能想出一个解决方法.

诀窍是创建一个新图像(使用Javascript图像对象),并确保它已加载,但不显示此图像.加载图像并在缓存中后,该图像将作为图库中的背景图像.

因此,您所要做的就是确保LI在加载相应图像后仅更改图像的背景图像.您LI最初可以使用默认的"加载"图像加载所有s.

所以你的代码将是这样的:

HTML(style加载图像的定义可以在您的外部样式表中):

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

您必须为每个人提供适当的CSS/ID等LI,并且您必须使上述内容适应您用于显示图库的循环或功能.

这是一个jsFiddle示例.(出于测试目的,它是一个很大的图像,所以加载需要一段时间).