Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.07.2008, 08:39
Аспирант
Отправить личное сообщение для EugenyK Посмотреть профиль Найти все сообщения от EugenyK
 
Регистрация: 17.03.2008
Сообщений: 64

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

Можно ли как-то дождаться, пока картинка полностью будет обновлена и после этого уже выполнить растворение предыдущей?
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2008, 09:09
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

У изображения есть событие onload.
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2008, 10:09
Аспирант
Отправить личное сообщение для EugenyK Посмотреть профиль Найти все сообщения от EugenyK
 
Регистрация: 17.03.2008
Сообщений: 64

А оно выполняется каждый раз, когда при изменении src завершается загрузка изображения или только первый раз, при формировании элемента dom?

Подскажите, пожалуйста, как внутри
function(result, errors){
if(result){...}
}
оформить $('#img_new > img').onload()?

Как только пришёл ответ от запроса, нужно фактически каждый раз менять событие onload.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Действие после полной загрузки Воитель Общие вопросы Javascript 4 02.10.2008 18:20