Jquery, как вызвать действие после изменения изображения Src и загрузки

Question

Итак, у меня есть скрипт, который изменяет основное изображение при нажатии на миниатюру. Это все хорошо, за исключением того, что иногда изображение не загружается сразу после нажатия на него.

По сути, как я узнаю, когда новое изображение загружается из src change.

Вот строка кода, которая меняет источник:

$thumbnail_image_src = $(this).find('.thumbnail-image').attr("data-full");

Answer 1

Привязать обработчик к событию 'load' для тега img ( this JSFiddle )

 $(this).find('.thumbnail-image').each(function() {
   $(this).load(function() {
     alert('image has changed and loaded');
   })
   .error(function() {
     alert('image has failed to load');
   }).attr('src', $(this).attr('data-full'));
 });

Эти функции будут запускаться при соответствующих событиях.Наслаждайтесь!

Answer 2

Тег

img содержит события load и error, которые можно использовать для определения, загружено изображение или нет.

$("img").load(function(){
  //Image loaded
}).error(function(){
  //Image load failed
}).attr("src", $thumbnail_image_src);