等待直到加载了背景中的图像（css） [英] wait until images in background (css) are loaded

问题描述

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

图像来自一个数据库，并动态创建。 / p>

我想要做的是：

< li> 并等待背景（图像）加载到缓存中，然后使用fadeIn显示它。
他们只有我能想到的（不是我可以，因为我不知道如何和如果它的可行性）是：

• 暂时取消设置每个< li> 的背景，同时显示加载讯息


• 要获取图片网址


• 使用$ .get函数加载它，然后在加载后执行任何其他操作

除了可行的东西，这将意味着它们将按顺序加载，所以如果由于某种原因，脚本将永远不会加载。

我看到一些网站，使用JS加载图片只有当其可见的浏览器，也许这可能是相同的情况下我正在寻找，因为我使用滚轮，只有一部分的图像显示在一次和当页面加载

解决方案

好吧，我想如果你只是使用 img 标签，但如果你确实想使用背景图片，那么我只能想出一个工作。

诀窍是创建一个新图片（使用 Javascript图片对象 ），以及请确保已加载，但不显示此图像。一旦图片加载完毕，并在缓存中，该图片将作为您的图片库中的背景图片提供。

因此，您需要做的是确保仅在加载相应图像后更改图像的 LI 的背景图像。您最初可以加载所有 LI ，默认为加载图片。

：

HTML（加载图片的 style 定义可能在您的外部样式表中）：

 < ul> 
< li id =pic1style =background-image：url（'images / loading.gif'）>< / li> 
< li id =pic2style =background-image：url（'images / loading.gif'）>< / li> 
< li id =pic3style =background-image：url（'images / loading.gif'）>< / li> 
 ... 
< / ul> 
  

您的jQuery / Javascript：

  var img = new Array（）; 
 
 //下面是一些循环或数组迭代器：
 
 var num = [NUMBER] //你可以使用这个数字跟踪多个图片。 
 //你也可以使用$（ul> li）。each（）并使用索引＃
 
 img [num] = new Image 
 
 //指定图片的来源
 var imgSource =http://yourimage.com/example.jpg; 
 
 //只在图像加载后附加相应的LI 
 img [num] .onload = function（）{
 $（＃pic+ num）.attr （style，background-image：url（'+ imgSource +'））; 
}; 
 
 img [num] .src = imgSource; 
  

为每个 LI 具有适当的CSS / ids等，并且您必须适应上面的循环或函数，用于显示您的库。

这里是一个jsFiddle示例 。 （为测试目的，它是一个大图像，所以它需要一段时间加载）。

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.

What I wanna do is:

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:

• 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!

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

解决方案

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.

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.

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.

So your code would be something like:

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>

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

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.

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

这篇关于等待直到加载了背景中的图像（css）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！