Выполнить код после загрузки изображения
Есть такая разметка:
<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, время: 00:00. |