等待，直到加载了背景（css）中的图像

Question

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

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

我想要做的是：

显示“加载”消息，在每一个<li>，等到背景（图像）加载在缓存中，然后用淡入表现出来。 他们只我能想到的（不，我不能，因为我不是很清楚如何，如果它是可行的）的方法是：

• 时间没有设置背景为每一个<li>同时显示“加载”消息
• 使每一个背景循环来获得图像URL
• 使用$不用彷徨函数加载它，然后做我想做的事情加载

旁可行的事情后，这将意味着他们将加载所以如果一个人不会加载一些reas对脚本永远不会继续！

我见过一些使用JS加载图像的网站，只有当浏览器可见时，也许这可能与我查找的情况相同，因为我使用的是滚动条，图像显示在一次，当页面加载

Answer 1

嗯，我认为事情可能会更简单，如果你只使用img标签，但如果你想使用背景图像，那么我只能想出一个解决办法。

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

因此，您所要做的就是确保在加载相应的图像后，您只能更改图像的背景图像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;​ 

你将不得不为每个LI有适当的CSS/ID等，你将不得不适应上述循环或功能你用来展示你的画廊。

Here's a jsFiddle example。 （为了测试的目的，这是一个很大的图像，所以需要一段时间才能加载）。

Answer 2

好吧，我想你可能会让事情太复杂。我不确定为什么当图像可能在标签内部时使用CSS背景。你说的原因是因为你的图像是动态创建的...我不明白这一点。

你可以做的就是创建一个返回的图像的页面，也许你可以使用一些参数...像图像尺寸：

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

那么所有你需要做的就是把这个网址里img标签的SRC ...如果你想，你可以在页面加载时预加载图片..或者当你的滑块移动时

或者我可能没理解你的问题= D

Answer 3

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

一层是以背景加载符号为背景的情况。这总是被看见。然后在上面的第二层中，我将元素放置在图像中，并使用.delay()和.fade()的jQuery .ready()函数。

因为这是令人费解的讲解，我会告诉我做什么：

<!-- Page Elements --> 

    <div id="background-loading"> // Background image of spinner 
     <div id="slider-case"> // Container of slider 
     <ul id="slider-content"> 
      <li class="slider-image"></li> 
      <li class="slider-image"></li> 
      <li class="slider-image"></li> 
     </ul> 
     </div> 
    </div> 

    <!-- Script --> 

    // 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 4

它寻找具有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); 
    }); 
} 

Answer 5

你可以一个CSS技巧，而不是一些长的JavaScript代码。
在这里你可以做这样的：

HTML：

<ul id="slideshow-container"> 
    <li><div id="image1"></div></li> 
    <li><div id="image2"></div></li> 
    <li><div id="image3"></div></li> 
    <li><div id="image4"></div></li> 
</ul> 

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的背景。
简单来说，加载图像的li将被显示，直到载入div中包含的幻灯片图像。