Jquery加载器gif顺序加载

Question

我想做的是有一个ajax加载器gif，它显示图像然后按顺序加载到页面中。

所以它会像这样工作。

ajax 加载程序显示 - 图像淡入 - ajax 加载程序淡出 - 然后移至下一个图像。

ajax 加载程序显示 - 图像淡入 - ajax 加载程序淡出 - 然后移至下一个图像。

ajax 加载程序显示 - 图像淡入 - ajax 加载程序淡出 - 然后移至下一个图像。

ajax 加载程序显示 - 图像淡入 - ajax 加载程序淡出 - 然后移至下一个图像。

在页面下方继续执行此操作。

这是我的代码。

 <ul id="clients">
  <li><img src="images/logos/clients_03.jpg" width="242" height="152" alt="Taylor Woodrow" /></li>
  <li><img src="images/logos/clients_04.jpg" width="242" height="152" alt="BG Group" /></li>
  <li><img src="images/logos/clients_05.jpg" width="242" height="152" alt="Canon" /></li>
  <li><img src="images/logos/clients_06.jpg" width="227" height="152" alt="department" /></li>
  <li><img src="images/logos/clients_08.jpg" width="242" height="164" alt="disney" /></li>
  <li><img src="images/logos/clients_09.jpg" width="218" height="164" alt="xts" /></li>
  <li><img src="images/logos/clients_10.jpg" width="223" height="164" alt="fisevr" /></li>
  <li><img src="images/logos/clients_11.jpg" width="227" height="164" alt="hilti" /></li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script>
$("ul#clients li").append('<img id="show" src="images/ajax-loader.gif" width="32" height="32" alt="fvdsv" />');
  $("ul#clients li:eq(0)").show("fast", function () {
    /* use callee so don't have to name the function */
    $(this).next("ul#clients li").fadeIn("slow", arguments.callee);

  });

所以它有点有效，但 ajax 加载程序只是一直显示任何帮助？

谢谢

Answer 1

首先，您在 img 中有 id=show 并将其附加到所有不正确 HTML 的图像。 Id 应该是唯一的。

如果你想在图像加载时显示ajax gif，并在加载图像后显示图像并隐藏gif，你应该使用如下内容：

• 将类“images”添加到要首先加载的图像并在其中添加样式显示：无。
• 然后将 ajax gif 直接添加到这些图像之后的 html 中（或者您可以像在示例中所做的那样）。

使用代码：

 $('ul#clients li img.images').load(function() {
   $(this).next().fadeOut();
   $(this).fadeIn();
 } );