Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2019, 02:08
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

Как указать очерёдность событий не через 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?
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2019, 04:25
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,513

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 => {
    //картинка не загрузилась
  }
)
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2019, 08:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

Aetae,
строка 7 разве не так должна быть ({naturalWidth })=> { или скобки лишние?
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2019, 14:04
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

Не, парни, не пашет.
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);
});
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2019, 14:24
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,513

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как указать в jQuery, что scrollTop "начнет уменьшаться"? Булат Азат улы Общие вопросы Javascript 16 18.05.2017 10:48
Как в обработчик php через Ajax передать несколько значений? Urukhay Общие вопросы Javascript 2 30.08.2014 16:19
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как посмотреть что было добавлено через javascript Telnet Internet Explorer 2 26.03.2013 22:07
Очень простой как даже по мне вопрос по поводу setTimeout & setInterval Хранитель Света Общие вопросы Javascript 5 12.07.2008 20:34