Исчезать в нескольких изображениях в последовательности, как только они загрузились - PullRequest
Новая
       7

Исчезать в нескольких изображениях в последовательности, как только они загрузились

1 голос
/ 21 июля 2010

Я пытаюсь добиться сетки изображений (10x10), которые, во-первых, загружаются после завершения загрузки остальной части страницы, а во-вторых, постепенно исчезают в 1 после другого

т.е. (представляет только одну строку) 

----------
+---------
++--------
+++-------
++++------

и т.д ... То, что у меня есть, так это: 

<script type="text/javascript">
var loadingImage = false;
function LoadImage(imageName,imageFile)
{
  if ((!document.images) || loadingImage) return;
  loadingImage = true;
  if (document.images[imageName].src.indexOf(imageFile)<0)
  {
    document.images[imageName].src = imageFile;
  }
  loadingImage = false;
}
LoadImage('0','images/0.jpg');
</script>

С этим тегом изображения 

<img class="fade" name="0" onLoad="LoadImage('1','images/1.jpg')" />

Это дает мне половину решения в той же мере, в какой оно загружает все изображения последовательно, но я не могу добавить постепенное исчезновение этих изображений. Изображения настроены в UL с 10 изображениями в каждом LI, и всего 10 LI = 100 изображений.

Как я могу их исчезнуть? Кроме того, есть ли способ распечатать все изображения в цикле, в котором они должны быть записаны вручную, так что пользователю не нужно проходить и проверять, правильно ли назван каждый тег изображения? (у меня уже есть пакетное переименование изображений)

Я нашел Этот , который похож на то, что мне нужно, но я не мог понять, как заставить его загружаться так, как я хочу. Спасибо

1 Ответ

5 голосов
/ 21 июля 2010

Вместо того, что у вас есть, вы можете сделать это, оставив разметку простой: 

<img class="fade" name="0" src="images/1.jpg" />

Тогда в вашем CSS просто спрятайте их изначально: 

.fade { display: none; }

Затем на страницеЗагрузите все сценарии, которые вам нужны, чтобы последовательно показать их: 

$(window).load(function() {
  $(".fade").each(function(i) {
    $(this).delay(400*i).fadeIn();
  });
});

window.onload в отличие от document.ready ждет, пока все изображения также будут загружены, поэтому просто используйте это событие для вашего .fadeIn() код. по умолчанию продолжительность любой анимации составляет 400 мс, а в .each() петле i - это индекс (на основе 0) элемента, поэтому первое изображение мгновенно исчезает.(как только все загружены), вторая задерживается на 400 мс (через .delay()), поэтому она затухает, когда первая выполнена, третья после этого и т. д. Если вы хотите затухать медленнее, скажем 1каждый второй, просто передайте это обеим функциям, например так: 

$(this).delay(1000*i).fadeIn(1000);
...