Как дождаться загрузки изображения?

Вопрос в заголовке, но хочу особо подчеркнуть слово "дождаться". Не асинхронно отловить момент загрузки, а именно дождаться. Кто-то, конечно же, сразу напишет капитанских фраз типа "используй промисы". Это я знаю. Но посмотрите сюда:
function loadImage (src) {
	return new Promise((resolve, reject) => {
		const img = new Image();
		img.onload = () => { console.log('load') };
		img.onerror = () => { console.log('error') };
		img.src = src;
	});
};

console.log('before');

loadImage('http://example.com/1.jpg')
	.then(() => { console.log('then') })
	.catch(() => { console.log('catch') });

console.log('after');

Сообщение 'after' попадет в консоль до загрузки картинки. А я хочу, чтобы скрипт как бы "остановился" и не выполнял никакой нижеследующий код до наступления одного из событий load/error.
Это вообще возможно?
  • Вопрос задан
  • 1098 просмотров
Пригласить эксперта
Ответы на вопрос 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
loadImage('http://example.com/1.jpg')
  .then(() => { console.log('then') })
  .catch(() => { console.log('catch') })
  .finally(() => { console.log('after') });
Ответ написан
@grinat
Через while (true) {} и там чекать пришел ли ответ от io что картинка загрузилась, и все это бузе промисов, только на колбэках. Но честно у тебя залочить все равно не выйдет, т.к. если ты блокируешь полностью основной тред, то через какое-то время будет сообщение что вкладка повисла, чтобы этого не случилось нужно через какие-то промежутки времени устраивать перерывы, но в это время начнут выполнятся таски из евент лупа, также пока залочен тред, ответа из io(load/error) скорее всего не будет. Еще есть вариант грузить через xhr, там был блокирующий метод загрузки данных, но хз жив ли он щас.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы