@del993788

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

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

Я получаю изображение, а затем пытаюсь получить его ширину:
$('.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?
  • Вопрос задан
  • 109 просмотров
Решения вопроса 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);
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
axifive
@axifive
Software Engineer
Что такое callback или promise в js не слышали?
Вам нужно указать функцию которая будет вызвана в случае успешной загрузки и вот уже в ней получать ширину изображения. В документации jQuery есть примеры.
Ответ написан
Комментировать
SDmitriyS
@SDmitriyS
Javascript разработчик
var img = new Image();
img.onload = function(){
var width = img.naturalWidth;
/*дальше добавляем куда нужно*/
//$('.psize').append();
}
img.src = "/upload/" + data['name'];
$('.tech').append(img);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы