Загрузка изображений синхронно с JavaScript

Question

Мне нужно загрузить изображение синхронно, то есть мне нужно приостановить выполнение JavaScript, пока изображение не загрузится. Поскольку image.onload является асинхронным, функция main возвращается до загрузки изображения.

Я использую холст, и если основная функция возвращается до загрузки изображения и, следовательно, отрисовывается, другие вещи на холсте будут нарисованы перед изображением. Это не работает, потому что порядок рисования на холсте очень важен!

Вот что я делал:

var img = new Image();
img.onload = function() {
    //image drawing code here
}
img.src = "blahblahblah";
//function returns here, and other drawing code happens before image is drawn

Есть ли способ сделать это синхронно или дождаться полной загрузки изображения, прежде чем вернуться из функции?

Answer 1

Разве это не может быть решено с помощью рефакторинга?

Оберните любой код, который вам нужно выполнить после загрузки изображения, в функцию, вызываемую обратным вызовом (или сделайте эту функцию callbak).

Я вижу, что вы говорите, что если основная функция вернется, другой код будет выполнен. Вы тоже можете это обернуть? Вы можете отложить его выполнение или сделать его зависимым от этого события загрузки или какого-то другого события?

Вы можете даже динамически загрузить источник другого кода JavaScript в образе при загрузке.

Answer 2

Есть ли способ сделать это синхронно или ждать, пока изображение полностью загружено перед возвратом из функции?

Нет. AFAIK, единственное, что можно сделать синхронно в Javascript, - это синхронный вызов XHR.

В любом случае, что вам действительно нужно сделать, это настроить иерархию обратных вызовов, которые реализуют ваши зависимости.

Answer 3

Я не думаю, что вы можете сделать это асинхронно, и думаю, что было бы очень рискованно, если путь к файлу изображения неправильный. Вы должны учитывать, что onload является обратным вызовом, который будет вызываться, когда изображение полностью загружено.

Таким образом, вы должны выполнить весь код рисования в функции обратного вызова.