Функция выполнения javascript после полной загрузки изображения

У меня есть следующая строка javascritp $("#hero_image img").attr('src', src);, чтобы изменить изображение. Следующие строки делают то, что они делают, на основе новой ширины изображений, которую я вызывал через $("#hero_image img").width();.

Однако, как я могу обеспечить, чтобы это изображение полностью загрузилось до получения ширины, иначе я вернусь со старой шириной? Установка тайм-аута недостаточно надежна.

Ответы

Ответ 1

Вы можете получить ширину в обработчике событий .load(), который запускается после полной загрузки, например:

$("#hero_image img").load(function() {
  alert($(this).width());
}).attr('src', src);

Если вы делаете это и повторно используете изображение, либо привязывайте обработчик .load() один раз, вам нужно различное поведение каждый .one(), поэтому он не продолжает добавлять обработчик событий onload:

$("#hero_image img").one('load', function() {
  alert($(this).width());
}).attr('src', src);

Ответ 2

$(function(){ // document ready
    $('#hero_image img').bind('load', function(){ // image ready
        // do stuff here
    });
});