[EugenyK]

Есть такая разметка:

<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.

Можно ли как-то дождаться, пока картинка полностью будет обновлена и после этого уже выполнить растворение предыдущей?