Эффект триггера после изменения атрибута src тега img

Question

Я использую этот код для изменения атрибута src тега изображения (используя prototype и scriptaculous):

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

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

Answer 1

Заменить

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

с

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

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

Answer 2

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

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

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