Trigger эффекта после изменения атрибута ГКЗА IMG тега

Question

Im используя этот код, чтобы изменить атрибут SRC тега изображения (с помощью прототипа и Scriptaculous):

new Effect.Fade("images",{afterFinish: 
function() 
{ 
    $("detail").setAttribute("src", "img/02.jpg"); 
    new Effect.Appear("images",{duration:0.8}); 
} 
}); 

Где «изображение» является контейнер (а дела) и «detail» - это img tag В результате появляется текущее изображение, появляется, а затем появляется новое изображение. Мой вопрос: как я могу проверить, что новое изображение полностью загружено браузером для запуска Effect.Appear после? Есть ли другой способ сделать это?

Answer 1

Изображения имеют onload событие, которое вы можете подключить до:

$("detail").onload = function() 
{ do_stuff(); } // Remember to do this BEFORE changing the src 

В моем опыте, это немного слоеное иногда (иногда, кажется, не получают казнены). Было бы лучше предварительно загрузить изображение и разрешить этот эффект только после загрузки полного документа (onload вместо dom:load или ready).

Answer 2

Заменить

new Effect.Appear("images",{duration:0.8}); 

с

Event.observe("detail", 'load', function() { 
    new Effect.Appear("images",{duration:0.8}); 
    Event.stopObserving('detail', 'load'); 
}); 

Чтобы сообщить пользователю, что вы загружаете изображение, вы можете установить CSS фон с изображением, с spinnging круг или любой другой подходит.