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

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

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

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

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

EDIT: Итак, я получил свою функцию для работы после выполнения предложения

 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;
}

Ответ 1

Возможно, это поможет:

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

Если необходимо дождаться загрузки изображения, следующий код загрузит следующее изображение (currentIndex - ваша переменная "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++);
    }
}

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

loadImages(imageURLarray);

Ответ 2

Возможно, попробуйте следующее:

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);

Ответ 3

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

https://github.com/desandro/imagesloaded

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

Удачи!