Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Событие после загрузки изображения. (https://javascript.ru/forum/events/42367-sobytie-posle-zagruzki-izobrazheniya.html)

Sherminator 23.10.2013 17:16

Событие после загрузки изображения.
 
есть такой фрагмент простого кода

<div class="openfullimage">
   <img src="ajaxloader.gif">
   <div class="helper">
       <img src="" style="display:none">
   </div>
</div>


и к нему прилагается фрагмент скрипта

$('.openfullimage').fadeIn(500,function(){
   console.info('fade end');
      $('.helper img').one('load',function(){
	   console.info('img loaded');
      });
});



Задумка в том, чтобы по нажатию на картинку появился блок с классом .openfullimage и после того как картинка внутри блока с классом .helper загрузилась в кеш, она заменяет ajaxloader.gif на только что загруженную.

В реальности все работает до момента, где нужно определить что картинка уже загружена. То есть появляется блок с классом .openfullimage и в нем вертится анимация ajaxloader.gif и все. Консоль пишет только fade end.

Вопрос, как определить что картинка загружена и после этого выполнить некоторую функцию?

devote 23.10.2013 17:54

$('.openfullimage').fadeIn(500,function(){
    console.info('fade end');
    var img = new Image();
    img.onload = function() {
        console.info('img loaded');
    }
    img.src = $('.helper img').attr('src');
});

рони 23.10.2013 17:56

Sherminator,
а где код загрузки картинки?

Sherminator 23.10.2013 20:23

он был, забыл вставить) Но уже проблему решил благодаря devote


Часовой пояс GMT +3, время: 16:44.