等到背景图片（CSS）是装 [英] wait until images in background (css) are loaded

问题描述

让我们说我们有照片的幻灯片。那些照片的缩略图显示在滑块的div包装（我用jQuery创建），每个图像包含在＆LT;李＆GT; 用CSS背景设置，这当然再$ p $的psents形象。我选择使用背景图像的布局问题，因为他们都在尺寸和长宽比不同。

Let's say we have a slideshow of pictures. the thumbnails of those pictures are showed in div wrapper with a slider (that I created with Jquery) and each image is included in a <li> with a CSS background set, which of course represents the image. I chose to use a background-image for a layout matter because they all are different in size and aspect ratio.

图像来自于一个数据库和动态创建。

The images comes from a db and are dynamically created.

我想什么做的是：

显示了每个℃的加载的消息;李＆GT; 并等待背景（图片）在高速缓存中加载，然后用淡入表现出来。
他们只（我能，因为我不是很确定如何，如果它不是可行）是我能想到的方式：

show a "loading" message over every <li> and wait until the background(image) is loaded in the cache and then show it with a fadeIn. They only way I can think of (not that I can since I'm not very sure how and if its doable) is:

• 未设置时间为每个背景＆LT;立GT; 同时显示加载消息


• 请一个循环，每背景获得图像的URL


• 使用$不用彷徨函数加载它，然后做我想做的事情后，加载

• temporally unset the background for every <li> while showing the "loading" message
• make a loop for every background to get the image url
• use the $.get function to load it and then do whatever I want after loading

旁可行的事情，这将意味着他们将依次加载，所以如果人会因为某些原因，该脚本将永远不会继续加载！

Beside the doable thing, this would imply they would load in sequence so if one won't load for some reason the script will never continue!

我看到一些网站使用JS浏览器加载图像只有当它的可见，也许这可能是我在寻找相同的情况下，因为我使用的是卷轴，只有图像的一部分在被再次表明，当页面加载

I've seen some sites that use JS to load images only when its visible by the browser, maybe this could be the same case I'm looking for, since I'm using a scroller and only a part of the images are showed at once and when the page loads

推荐答案

好吧，我想事情可能会简单，如果你只是使用 IMG 标签，但如果你想使用背景图片，然后我只能想出一个变通。

Well, I think things may be simpler if you just use img tags, but if you do want to use background images then I could only come up with a work around.

关键是要建立一个新的图像（使用 JavaScript的图像对象 ），并确保它的加载，但不显示此图像。一旦图像加载，并且在缓存中，该图像将作为在您的画廊的背景图像。

The trick is to create a new image (using the Javascript image object), and make sure it's loaded, but this image isn't displayed. Once the image is loaded and in the cache, that image will be available as a background image in your gallery.

所以，你所要做的就是确保相应的图像加载后，你只能改变图像的 LI 的背景图像。你可以用默认的加载的形象开始加载所有 LI 秒。

So, all you have to do is make sure that you only change the background image of the LI of an image after the corresponding image is loaded. You can load all LIs with a default "loading" image initially.

所以你的code会是这样的：

So your code would be something like:

HTML（即风格为加载图像的定义可能是在外部的样式表）：

HTML (the style definitions for the loading image could be in your external style sheet):

<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的：

Your 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 / IDS等，为每个 LI ，你将有上述适应循环或功能使用，以显示您的画廊

You would have to have the appropriate CSS / ids etc for each LI, and you would have to adapt the above to the loop or function you use to show your gallery.

下面是一个例子的jsfiddle 。 （用于测试目的这是一个大的图像，因此它需要一段时间来加载）。

Here's a jsFiddle example. (for testing purposes it's a big image, so it takes a while to load).

这篇关于等到背景图片（CSS）是装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！