Есть такая разметка:
<style type='text/css'>
#img_old {position: relative; z-index: 2}
#img_new {position: relative; top: -222px; z-index: 1}
</style>
<div>
<div id='img_old'>
<img src='/img/img_1.jpg' alt='' width='222px' height='222px' />
</div>
<div id='img_new'>
<img src='/img/empty.gif' alt='' width='222px' height='222px' />
</div>
</div>
(#img_new лежит под #img_old)
По клику на ссылку загружается jsHttpRequest, который производит замену одной картинки на другую и обновляет информацию о картинке.
Задача: при клике по ссылке подгрузить в #img_new новую картинку (её название получаю из result['name']) и после того как она подгрузилась растворить старую картинку #img_old.
Как я понимаю, было бы достаточно в принципе написать так:
function changeImg(id) {
JsHttpRequest.query(
'/?act=load_img&id='+id,
{ },
function(result, errors){
if(result){
$('#new_img > img').attr('src','./img/'+result['name']);
$('#img_old > img').animate({opacity:0},666,function(){
$(this).attr('src','./img/'+result['name']).animate({opacity: 1},1);
$('#new_old > img').attr('src','/img/empty.gif')
});
// rest of code
},
true
);
}
Но при первой загрузке страницы и первых запросах jsHttpRequest до первого обновления всей страницы строчка $('#img_old > img').animate(...) новая картинка будет загружена из обновленного src.
Можно ли как-то дождаться, пока картинка полностью будет обновлена и после этого уже выполнить растворение предыдущей?
