jquery: fade in image after image

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Вы можете быть в состоянии избежать возможных условий гонки, добавив событие изображения перед добавлением его в 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; 
}