Блог

Я играю с загрузкой изображения и застрял на последовательном выполнении кода

 function processImage(callback) {
  console.log("Start");
  callback('http://lorempixel.com/400/200/');
  console.log("Finish");
}

function loadImage(url) {
   console.log('Load Method')
   var img = new Image();
   img.src = url;
   img.onload = function (event) {
      console.log('Image Loaded')
   }
}

processImage(loadImage);

  

Для приведенного выше кода мне нужен вывод в виде Start -> Load Method -> Image Loaded -> Finish

Вместо этого я получаю Start -> Load Method -> Finish -> Загруженное изображение

Я думаю, у меня возникли проблемы с использованием метода обратного вызова.

Любая помощь приветствуется.

img.onload устанавливает прослушиватель событий — поэтому, когда происходит событие, оно вызывает функцию. Итак, если ваше изображение не загрузится примерно за миллионную долю секунды (количество времени, которое, я думаю, требуется JS для перехода к следующей строке), console.log("Finish") это произойдет первым.

Когда изображение полностью загружено, вызывается функция, для которой установлено .onload значение. Поскольку изображение загружается после того, как JavaScript обработал следующую строку, это произойдет первым. Если вы действительно хотите указать начало и конец, укажите окончание console.log после загрузки изображения console.log .

 img.onload = function (event) {
    console.log('Image Loaded')
    console.log('Finish)
}