Question

我有一组这种格式的图像：

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

我的目标是，一旦所有图像都完成加载，然后#photo-list将淡入。我还想在加载图像之前显示加载动画。任何帮助表示赞赏！

Answer 1

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

但是这样做：

结构事物：

<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

上使用了循环

Answer 2

为了您的目的，这可能会过于简化，但如果页面除了您的图片列表之外几乎没有其他内容，您只需使用

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

在加载页面的全部内容之前，此函数中的任何代码都不会执行。如果页面上有其他内容可能会延迟执行此类代码，我同意MiracleMan的意思是，如果所有标志都设置为true，则会为每个加载的图像跳出一个标志，然后执行代码。

一旦全部加载，淡入图像列表

2 个答案: