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

问题描述

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

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.

我想做的是:

在每个 <li> 上显示加载"消息，并等待背景(图像)加载到缓存中，然后使用淡入显示.我能想到的唯一方法(不是我能想到的，因为我不太确定如何以及是否可行)是:

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:

• 在显示正在加载"消息时暂时取消设置每个 <li> 的背景
• 为每个背景创建一个循环以获取图像 url
• 使用 $.get 函数加载它，然后在加载后做任何我想做的事情

除了可行的事情之外，这意味着它们将按顺序加载，因此如果由于某种原因无法加载脚本将永远不会继续！

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.

所以你的代码应该是这样的:

So your code would be something like:

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

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

您必须为每个 LI 设置适当的 CSS/id 等，并且您必须将上述内容调整为用于显示画廊的循环或函数.

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屋！