У меня есть следующая строка javascritp $("#hero_image img").attr('src', src);, чтобы изменить изображение. Следующие строки делают то, что они делают, на основе новой ширины изображений, которую я вызывал через $("#hero_image img").width();.
Однако, как я могу обеспечить, чтобы это изображение полностью загрузилось до получения ширины, иначе я вернусь со старой шириной? Установка тайм-аута недостаточно надежна.
Вы можете получить ширину в обработчике событий .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);
$(function(){ // document ready
$('#hero_image img').bind('load', function(){ // image ready
// do stuff here
});
});