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

[drkrol]

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

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

$('.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?

[Aetae]

new Promise((resolve, reject) => {
  var img = new Image();
  img.onload = () => resolve(img);
  img.onerror = reject;
  img.src - '/upload/' + data['name'];
}).then(
  naturalWidth => {
    $('.tech').append("<img src='/upload/" + data['name'] + "' class='" + data['id'] + " toimg'><p class='psize'></p></div>");
    $('.psize').append(naturalWidth);
  },
  error => {
    //картинка не загрузилась
  }
)

[рони]

Aetae,
строка 7 разве не так должна быть ({naturalWidth })=> { или скобки лишние?

[drkrol]

Не, парни, не пашет.
http://jsfiddle.net/89xc5zt4/


Я сделал вот таким образом:

$('.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);
});

[Aetae]

рони, не, в 3 должно быть img.naturalWidth.
Писал на коленке не глядя, извиняюсь.