淡入图像的列表，一旦所有加载

问题描述：

<ul id="photo-list"> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
    <li><img src="" /></li> 
</ul>

我的目标是，一旦所有的图像都已完成加载，那么＃照片列表将淡出。我还想在加载图像之前显示加载动画。任何帮助表示赞赏！

有没有人有这样的想法可以完成？ http://jqueryfordesigners.com/image-loading/ 这篇文章有很多好主意，但它需要在JS中指定图像。由于这些来自数据库，因此我无法使用该方法。 – 2010-03-10 01:33:11

答

我想我有点担心你为什么要等他们全部加载之前，你展示他们。快速获取内容对保留受众群体非常重要。

，但做到这一点：

结构件事情：

 
<div id="photos"> 
    <img src="yourloading.gif" /> 
    <ul id="photo-list"> 
     <li><img src="" /></li> 
     <li><img src="" /></li> 
     <li><img src="" /></li> 
    </ul> 
</div>

那么你的默认样式：

 
#photo-list { display: none; }

那么你的jQuery

 
$(document).ready(function() { 
    $("#photo-list li img:last").onload(function() { 
     $("#photo-list img").hide(); 
     $("#photo-list").fadeIn(); 
    } 
}

当然，这只是检测是否该最后一张图像被加载，并且根据图像大小，这很可能会造成其他图像可能无法加载的竞态条件。可能更好的方法是使用jQuery的数据方法在onload事件中设置一个标志，然后测试以查看是否所有图像都具有该数据位集，然后触发隐藏和淡入。

现在，如果您想要花一些时间进行图像循环，只需使用jQuery循环插件，将图像隐藏在UL中并让循环显示它们。我用我的照片的网站http://www.robmiracle.com

答

这可能过于简化你的目的周期，但如果页面由小比你的图片列表别的其他的，你可以简单地使用

$(window).load(function({ ... });

任何代码在这个函数内不会执行，直到页面的全部内容加载完毕。如果您在页面上有其他内容可能会延迟执行此类代码，我会同意MiracleMan，因为您会为每个加载的图像绊倒一个标志，然后在所有标志都设置为true时执行您的代码。

淡入图像的列表，一旦所有加载

相关推荐