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

Question

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

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

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

Answer 1

出于您的目的，这可能过于简化，但如果页面仅包含图像列表之外的其他内容，您可以简单地使用

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

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

Answer 2

我想我有点担心你为什么要等它们全部加载后再展示它们。快速获取内容对于保留观众很重要。

但这样做：

结构事物：

<div id="照片">
   <img src="yourloading.gif" />
   <ul id="照片列表">
      <li><img src="" /></li>
      <li><img src="" /></li>
      <li><img src="" /></li>
   </ul>
</div>

然后你的默认样式：

#照片列表{显示：无；}

然后你的 jQuery

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

当然，这仅检测是否加载了最后一张图像，并且根据图像大小，这很可能会产生一个可能无法加载其他图像的竞争条件。可能更好的方法是使用 jQuery 的 data 方法在 onload 事件期间设置一个标志，然后测试是否所有图像都设置了该数据位，然后触发隐藏和淡入。

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