Как указать очерёдность событий не через setTimeout?

Question

[del993788]

Здравствуйте.

Я получаю изображение, а затем пытаюсь получить его ширину:

$('.tech').append("<img src='/upload/" + data['name'] + "' class='" + data['id'] + " toimg'><p class='psize'></p></div>");
$('.psize').append($('.' + data['id']).get(0).naturalWidth);

Но по каким-то причинам я получаю ответ "0". Я так предполагаю, это связано с тем, что изображение ещё не успело создаться, а я уже пытаюсь получить его ширину. Если я установлю setTimeout, то всё будет работать, но это не самый красивый метод, так как за отведённое мной время изображение может не успеть подгрузиться и я опять получу "0". Опять же я теряю во времени, если изображение уже подгрузилось, а я жду непонятно чего.

Подскажите, как указать очерёдность событий, чтобы в начале выполнился append в .tech, а затем append в .psize?

Answer 1

[del993788]

$('.tech').append("<div class='imgwrap'><img src='/upload/" + data['name'] + "' class='" + data['id'] + " toimg'></div><p class='psize'></p>");

$('.' + data['id']).on('load', function(){
    $('.psize').append($(this).get(0).naturalWidth);
});

Answer 2

[Алексей 〒.]

Что такое callback или promise в js не слышали?
Вам нужно указать функцию которая будет вызвана в случае успешной загрузки и вот уже в ней получать ширину изображения. В документации jQuery есть примеры.

Answer 3

[Дмитрий C]

var img = new Image();
img.onload = function(){
var width = img.naturalWidth;
/*дальше добавляем куда нужно*/
//$('.psize').append();
}
img.src = "/upload/" + data['name'];
$('.tech').append(img);