jquery - jquery - запрос:исчезает изображение за изображением

Question

У меня есть страница с 10 изображениями, и я хочу, чтобы они исчезали одно за другим, как только изображение будет загружено.как я могу определить, что изображение загружено и готово к отображению?и должен ли я перебирать загруженные изображения fadeIn и после fadedIn ждать загрузки следующего?

Answer 1

Просто используйте событие load() для изображения.Например.

$('#some_image').hide()
    .load(function () {
      $(this).fadeIn();
    })
    .attr('src', 'images/headshot.jpg')

Answer 2

Возможно, вы можете предварительно загрузить изображения (Смотрите здесь) а затем последовательно вызывайте методы fadein и fadeout в цикле.

Answer 3

(Основано на ответе Криса Эриксона)

Возможно, вам удастся избежать возможных условий гонки, добавив событие к изображению перед добавлением его в DOM (неподтверждено, но я предпочитаю перестраховаться).Также этот метод хорош для накладывания затухающих изображений друг на друга.

Это то, что я использую для элемента управления галереей, где я добавляю изображение поверх другого изображения и затемняю его - затем я удаляю нижнее изображение, если я уже добавил 2 изображения.

var url = .....;
var container = $('#images_container');

$("<img />").hide().load(function () {
    $(this).fadeIn(); 
}).attr('src', url).appendTo($(container ));

if ($(container).children().length > 2) {
    $(":nth-child(1)", container).remove();
}

Вот HTML-код:

<div id="images_container"></div>

CSS должен быть настроен следующим образом, иначе изображения будут складываться друг на друга, а не накладываться друг на друга.

#images_container {
   position: relative;
}

#images_container {
   position: absolute;
}