JavaScript attend jusqu'à ce qu'une image soit complètement chargée avant de continuer le script

J'ai été la recherche autour d'un lot de JavaScript réponses, mais je n'ai pas trouvé un seul qui répond vraiment à mon problème. Ce que j'essaie de faire est de charger une image, saisir les données de pixel, effectuer une analyse, puis de charger une autre image de répéter le processus.

Mon problème est que je ne peux pas précharger toutes les images parce que ce script doit être capable de travailler sur de grandes quantités d'images et de préchargement peut-être trop de ressources lourd. Donc, je suis coincé à essayer de charger une nouvelle image à chaque fois grâce à une boucle, mais je suis coincé avec une condition de concurrence entre le chargement de l'image et le script de dessin à la toile du contexte. Au moins, je suis sûr que c'est ce qui se passe parce que le script fonctionnera très bien avec les images mises en cache au préalable (par exemple, si je actualisation après le chargement de la page précédemment).

Comme vous allez le voir, il ya plusieurs lignes de code en commentaire parce que je suis très nouveau à JavaScript et ils n'étaient pas sur le même chemin que j'ai pensé, mais je ne voulais pas les oublier si j'avais besoin de la fonctionnalité plus tard.

C'est l'extrait de code que je crois que suscite le problème:

EDIT: Alors j'ai eu ma fonction au travail après à la suite d'une suggestion

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

source d'informationauteur Braains

  1. 14

    Peut-être que cela aidera à:

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

    Si il est nécessaire d'attendre que l'image à charger, le code suivant va charger l'image suivante (currentIndex est votre "img" variable):

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

    Au lieu d'une boucle "for", utilisez par exemple cette fonction:

    loadImages(imageURLarray);
  2. 0

    Peut-être essayer ceci:

    http://jsfiddle.net/jnt9f/

    Réglage du gestionnaire onload avant la mise img src sera assurez-vous que l'événement onload être déclenché même de l'image est mis en cache

    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. 0

    En fait...beaucoup de développeurs sont en pointant ici pour détecter le moment où les images sont fait de chargement après un événement jQuery..

    https://github.com/desandro/imagesloaded

    Si vous pouvez déterminer la date de l'événement qui déclenche vos images à charger (par exemple, l'ajout d'un Id ou une classe sur la page de droite avant de vos images commencent à charge), vous devez être en mesure de mélanger qu'avec ce plug-in sur github.

    Bonne Chance!