等到后台（css）中的图像被加载

假设我们有一个图片幻灯片。 这些图片的缩略图显示在带有滑块的div包装器中（我用Jquery创建），每个图像都包含在带有CSS背景集的

中，当然这代表图像。 我选择使用背景图像来处理布局问题，因为它们的大小和宽高比都不同。

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

我想做的是：

在每个

显示“加载”消息，并等待后台（图像）加载到缓存中，然后使用fadeIn显示它。 他们只有我能想到的方式（不是我可以，因为我不太确定如何以及它是否可行）是：

• 在显示“加载”消息时，暂时取消每个
• 的背景
• 为每个背景制作一个循环以获取图像url
• 使用$ .get函数加载它，然后在加载后执行我想要的任何操作

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

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

Answer 1

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

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

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

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

HTML（加载图像的style定义可以在外部样式表中）：

 
 
 
 
 ...  

你的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等，并且您必须使上述内容适应您用于显示图库的循环或函数。

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

Answer 2

你可以使用css技巧而不是一些长的JavaScript代码。
在这里你可以这样做：

HTML：

CSS：

 #slideshow-container>li{ background-image:url('loading.gif') } #slideshow-container>li>div{ width:100%; height:100%; } #slideshow-container>li>div{ background-color:transparent; } #image1{ background-image:url('image1.jpg'); } #image2{ background-image:url('image2.jpg'); } #image3{ background-image:url('image3.jpg'); } #image4{ background-image:url('image4.jpg'); } 

说明：
幻灯片的图像将是li中包含的div的背景。 在加载图像之前，背景将是透明的，这将显示li的背景，即动画加载gif。
简单来说，在加载div中包含的幻灯片图像之前，将显示li的加载图像。

Answer 3

好吧，我想也许你的事情太复杂了。 当图像可能位于标签内时，我不确定为什么要使用css背景。 你说原因是因为你的图像是动态创建的…我不明白。

你可以做的是创建一个返回图像的页面，也许你可以使用一些参数…像图像大小：

 http://www.mysite.com/create_image.php?size=200x100&id=img1 

那么你需要做的就是将这个url放在img标签的SRC中…如果你愿意，你可以在页面加载时预加载图像。或者当你的滑块移动时

或者也许我没有理解你的问题= D.

Answer 4

我使用的解决方案有两层元素。

一层是具有背景加载符号作为背景的案例。 总是可以看到这一点。 然后在上面的第二层中，我将元素放在图像中，并使用带有.delay()和.fade()的jQuery .ready()函数。

因为这是令人费解的解释，我将展示我的所作所为：

   
 // Background image of spinner 
 // Container of slider 
 
 
 
 
 
 
  // Somewhere you have a script that manages the slider // Below is the loading animation/image manager $(document).ready(function() { $('#slider-content').delay(200).animate({opacity:1.0}, 'linear', function(){ $('#background-loading').animate({opacity:0, 'margin-left':'-70px'}, 'linear'); $('.slider-image').animate({opacity:1.0, 'margin-left':'0em'}, 'linear', function(){}); }); }); 

延迟和淡入使得加载时间看起来是有意的，而.ready()将等到元素完全加载。

通过具有单独的背景图层，除了滑块之外，您不必担心操纵任何内容。 要添加其他效果，您可以对图像加载进行回调，该图像加载会对加载动画进行淡入淡出。

Answer 5

它查找具有src属性或backgroundImage css属性的元素，并在加载它们的图像时调用动作函数。

 /** * Load and wait for loading images. */ function loadImages(images, action){ var loaded_images = 0; var bad_tags = 0; $(images).each(function() { //alert($(this).get(0).tagName+" "+$(this).attr("id")+" "+$(this).css("display")); var image = new Image(); var src = $(this).attr("src"); var backgroundImage = $(this).css("backgroundImage"); // Search for css background style if(src == undefined && backgroundImage != "none"){ var pattern = /url\("{0,1}([^"]*)"{0,1}\)/; src = pattern.exec(backgroundImage)[1]; }else{ bad_tags++; } // Load images $(image).load(function() { loaded_images++; if(loaded_images == ($(images).length - bad_tags)) action(); }) .attr("src", src); }); }