Выполнить код после загрузки изображения
Есть такая разметка:
<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. Можно ли как-то дождаться, пока картинка полностью будет обновлена и после этого уже выполнить растворение предыдущей? |
У изображения есть событие onload.
|
А оно выполняется каждый раз, когда при изменении src завершается загрузка изображения или только первый раз, при формировании элемента dom?
Подскажите, пожалуйста, как внутри function(result, errors){ if(result){...} } оформить $('#img_new > img').onload()? Как только пришёл ответ от запроса, нужно фактически каждый раз менять событие onload. |
| Часовой пояс GMT +3, время: 02:31. |