JavaScript ждет, пока изображение полностью загрузится, прежде чем продолжить скрипт

я искал много ответов на JavaScript, но у меня нетЯ нашел тот, который действительно отвечает моей проблеме. Что я'я пытаюсь сделать это загрузить изображение, получить данные о пикселях, выполнить анализ, а затем загрузить другое изображение, чтобы повторить процесс.

Моя проблема в том, что я могу• предварительно загрузить все изображения, поскольку этот сценарий должен работать с большим количеством изображений, а предварительная загрузка может быть слишком ресурсоемкой. Так что я'Я застрял, пытаясь загрузить новое изображение каждый раз через цикл, но яЯ застрял в состоянии гонки между загрузкой изображения и сценарием, рисующим его на холсте.с контекстом. По крайней мере яя уверен, чтоС тем, что происходит, потому что сценарий будет хорошо работать с предварительно кэшированными изображениями (например, если я обновлюсь после загрузки страницы ранее).

Как и ты'посмотрим, есть несколько строк кода, закомментированных, потому что яя невероятно новичок в JavaScript, и они не былине так, как я думал, но я нене хочу забывать о них, если мне понадобится функциональность позже.

Это фрагмент кода, который, по моему мнению, порождает проблему:

РЕДАКТИРОВАТЬ: Таким образом, я получил свою функцию на работу после того, как предложение

 function myFunction(imageURLarray) {
  var canvas = document.getElementById('imagecanvas');
  console.log("Canvas Grabbed");

  if (!canvas || !canvas.getContext) {
    return;
  }

  var context = canvas.getContext('2d');

  if (!context || !context.putImageData) {
    return;
  }

  window.loadedImageCount = 0;
  loadImages(context, canvas.width, canvas.height, imageURLarray, 0);
}

function loadImages(context, width, height, imageURLarray, currentIndex) {
  if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) {
    return false;
  }
  if (typeof currentIndex == 'undefined') {
    currentIndex = 0;
  }

  var currentimage = new Image();
  currentimage.src = imageURLarray[currentIndex];

  var tempindex = currentIndex;
  currentimage.onload = function(e) {

    // Function code here

    window.loadedImageCount++;

    if (loadedImageCount == imageURLarray.length) {

      // Function that happens after all images are loaded here
    }
  }
  currentIndex++;
  loadImages(context, width, height, imageURLarray, currentIndex);
  return;
}
 Braains25 июл. 2017 г., 22:03
Этот вопрос все еще получает представление 4 года спустя, поэтому я подумал, что упомяну, что если у вас много изображений, вы можете назвать рекурсивныйloadImages сsetTimeout(..., 0) так что стек вызовов нет переполнение.

Ответы на вопрос(3)

http://jsfiddle.net/jnt9f/

Установка обработчика onload перед установкой img src обеспечит запуск события onload, даже если изображение кэшируется

var $imgs = $(),i=0;
for (var img = 0; img < imageURLarray.length; img++) {
   $imgs = $imgs.add('<img>');
}

var fctn = (function fctn(i){
    $imgs.eq(i).on('load',function(){
        //do some stuff
        //...
        fctn(++i);
    }).attr('src',imageURLarray[i]);    
})(0);
 A. Wolff04 июн. 2013 г., 16:23
@ downvoter, пожалуйста, рассмотрите, чтобы прокомментировать downvote ...
 A. Wolff04 июн. 2013 г., 16:22
Это сделано для того, чтобы избежать каких-либо условий гонки. Вы начнете загружать следующее изображение только тогда, когда предыдущее полностью загружено. Смотрите jsfiddle в обновленном ответе
 Braains04 июн. 2013 г., 16:17
Не могли бы вы немного объяснить, что происходит в вашем примере кода? Я'Я не так хорошо знаком с JQuery, как следовало бы.
 Braains04 июн. 2013 г., 17:00
После того, как я попробую реализовать другой ответ, я попробую это. Я'Я немного более знаком с рекурсией, чем JQuery, поэтому я хочу попробовать это в первую очередь.

чтобы определить, когда образы загружаются после события jQuery.

https://github.com/desandro/imagesloaded

Если вы можете определить, когда событие инициирует загрузку ваших изображений (например, добавив Id или класс на страницу прямо перед тем, как ваши изображения начнут загружаться), то вы сможете смешать это с этим плагином на github.

Удачи!

 klewis04 июн. 2013 г., 16:41
что вызывает эти "дополнительный» изображения для загрузки?
 Braains04 июн. 2013 г., 16:15
Пробовал, но яя не просто загружаю одно изображение, яЯ загружаю изображение каждый раз через цикл. Все это происходит после загрузки страницы.
 Braains04 июн. 2013 г., 16:59
мой скрипт загружает изображение каждый раз через цикл с помощью var currenttimage = new Image (); currenttimage.src = imageURLarray [img];
 klewis04 июн. 2013 г., 16:24
хорошо, подожди, я думаю, что нашел что-то. редактировать мой ответ сейчас ...
 Braains04 июн. 2013 г., 16:32
Проблема с предварительной загрузкой заключается в том, что яЯ имею дело с потенциально большим количеством изображений.
Решение Вопроса

Может быть, это поможет:

currentimage.onload = function(e){
    // code, run after image load
}

Если необходимо дождаться загрузки изображения, следующий код загрузит следующее изображение (currentIndex is your "IMG» переменная):

var loadImages = function(imageURLarray, currentIndex){
    if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) return false;
    if (typeof currentIndex == 'undefined'){
       currentIndex = 0;
    }
    // your top code
    currentimage.onload = function(e){
        // code, run after image load
        loadImages(imageURLArray, currentIndex++);
    }
}

Вместо "за" цикл, используйте, например, эту функцию:

loadImages(imageURLarray);
 Braains04 июн. 2013 г., 16:30
@maximkou можешь привести пример того, что ты имеешь в виду? Я нене видно, как обратный вызов останавливает выполнение JavaScript без полной загрузки изображения.
 maximkou04 июн. 2013 г., 16:31
@Braains, ответ исправлен, см. Пример.
 Braains06 июн. 2013 г., 20:59
@maximkou Я понял это!
 Braains04 июн. 2013 г., 17:36
@maximkou, я попробовал ваше решение, но изображения неЗагрузите в том порядке, в котором они находятся, чтобы он мог двигаться до загрузки каждого изображения.
 Braains04 июн. 2013 г., 16:17
Я смотрел на это, но я понимаю, что остальная часть сценария будет продолжать работать до тех пор, пока изображение не загрузится и эта функция не сработает, и поэтому я 'У меня будет такое же состояние гонки.
 maximkou05 июн. 2013 г., 18:48
@Braains, без выбора ответа? Если да, то я не знаю.
 Braains04 июн. 2013 г., 16:34
Это может сработать! Позвольте мне реализовать это, яЯ вернусь с результатами в нескольких.
 Braains05 июн. 2013 г., 17:28
@maximkou есть ли способ пометить этот вопрос как ответивший? Я обновил исходный пост, чтобы показать мой измененный код на тот случай, если будущие гуглеры захотят увидеть мое решение.
 A. Wolff04 июн. 2013 г., 16:37
@Braains, но это в основном мой ответ :) Вы должны установить src изображения после установки обработчика onload, иначе событие onload может не вызываться для кэшированного изображения (поведение браузера)
 Braains04 июн. 2013 г., 16:24
Дайте мне несколько минут, чтобы реализовать это и посмотреть, работает ли это! Но я'м склонен согласиться с @roasted
 A. Wolff04 июн. 2013 г., 16:23
перегруз выигралt ждать загрузки следующих изображений
 maximkou04 июн. 2013 г., 16:24
@Braains, что я вижу сейчас: вам нужен только тот код, который начинается с console.log ('Изображение нарисовано) вставить в обратный звонок.
 maximkou04 июн. 2013 г., 16:21
@Braains, если правильно реализовано, то нет. Если у вас есть другой код, покажите его

Ваш ответ на вопрос