JQuery загрузчик GIF последовательной загрузки - PullRequest
Новая
       19

JQuery загрузчик GIF последовательной загрузки

1 голос
/ 18 января 2011

Я пытаюсь сделать gif-загрузчик ajax, который показывает, когда изображения последовательно загружаются на страницу.

так будет работать вот так.

ajax loader show - изображение fadeIn - ajax loader fadeOut - затем переходите к следующему изображению.

ajax loader show - изображение fadeIn - ajax loader fadeOut - затем переходите к следующему изображению.

ajax loader show - изображение fadeIn - ajax loader fadeOut - затем переходите к следующему изображению.

ajax loader show - изображение fadeIn - ajax loader fadeOut - затем переходите к следующему изображению.

Продолжайте делать это прямо на странице.

Вот мой код. 

 <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 все время показывает какую-либо помощь?

Спасибо

1 Ответ

0 голосов
/ 28 апреля 2011

Ну, во-первых, у вас есть id = show в img, и вы прикрепляете это ко всем изображениям, которые не соответствуют HTML. Идентификаторы должны быть уникальными.

Если вы хотите показать ajax gif во время загрузки изображения и после его загрузки, показать изображение и скрыть gif, вы должны использовать что-то вроде этого:

  • Добавьте класс «images» к изображениям, которые вы хотите загрузить первыми, и добавьте в него отображение стиля: нет.
  • Затем добавьте AJAX GIF-файлы прямо в HTML после этих изображений (или вы можете сделать это, как вы сделали в своем примере).

Используйте код: 

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