Si je charge des images multiples avec la boucle for, dois-je seulement besoin d'une img.onload de la fonction?

Je suis donc le chargement de plusieurs images sur plusieurs toiles de coeur (une image par toile/ctx - son d'un diaporama). Je veux faire en sorte que chaque image est chargée avant de tenter de dessiner l'image sur la toile.

Voici le code...

  • Dans l'Exemple 1, je suis à l'aide de 3 événements onload (un pour chaque image)
  • Dans l'Exemple 2, je suis en utilisant un événement onload, mais c'est la dernière image qui est appelée dans la boucle for

Question: puis-je utiliser l'Exemple 2 et être sûr de supposer que si la dernière image est chargée, puis les images avant doit être chargé?

Aussi---- j'ai essayé déjà, mais peut-il être fait à l'intérieur d'une boucle for? Je n'ai pas réussi à le faire fonctionner. Voir L'Exemple 3

Exemple 1 3 onload événements

var img=[0,'slide1','slide2','slide3'];   

for (var i=1;i<=3;i++) {
        img[i] = new Image();
        img[i].src = '/images/slide' + i + '.png'
    }

    img[1].onload = function() { //checks to make sure img1 is loaded
        ctx[1].drawImage(img[1], 0, 0);
    };

    img[2].onload = function() { //checks to make sure img2 is loaded
        ctx[2].drawImage(img[2], 0, 0);
    };

    img[3].onload = function() { //checks to make sure img3 is loaded
        ctx[3].drawImage(img[3], 0, 0);
    };

Exemple 2 seul le dernier événement onload

var img=[0,'slide1','slide2','slide3'];   

for (var i=1;i<=3;i++) {
        img[i] = new Image();
        img[i].src = '/images/slide' + i + '.png'
    }

    img[3].onload = function() { //checks to make sure the last image is loaded
        ctx[1].drawImage(img[1], 0, 0);
        ctx[2].drawImage(img[2], 0, 0);
        ctx[3].drawImage(img[3], 0, 0);
    };

Exemple 3 un onload dans la boucle for à faire tous les événements onload

var img=[0,'slide1','slide2','slide3'];   

for (var i=1;i<=3;i++) {
        img[i] = new Image();
        img[i].src = '/images/slide' + i + '.png'

        img[i].onload = function() { //checks to make sure all images are loaded
            ctx[i].drawImage(img[i], 0, 0);
        };

    }

Je suppose que je ne peux pas faire l'exemple 3, car une image ne sera probablement pas être chargé par le temps de la boucle for s'exécute la deuxième fois et réécrit l'événement onload de l'image suivante effaçant ainsi l'événement onload de l'avant de l'image. - Il Correct?

OriginalL'auteur Jacob | 2011-10-03

  1. 10

    Vous aurez la portée des problèmes avec la dernière boucle à cause des fermetures. Pour que quelque chose comme cela, vous aurez envie de sortir de la fermeture de l'encapsulation de votre affectation fonctionnelle dans sa propre fonction. Cet article l'explique bien.

    Idéalement, votre dernière boucle for ressemblerait à quelque chose comme ceci:

    var images = [0,'slide1.png', 'slide2.png', 'slide3.png'];

//Assign onload handler to each image in array
for ( var i = 0; i <= images.length; i++ ){

   var img    = new Image();
   img.onload = (function(value){
       return function(){
           ctx[value].drawImage(images[value], 0, 0);
       }
   })(i);

   //IMPORTANT - Assign src last for IE
   img.src    = 'images/'+images[i];
}

    Aussi, gardez à l'esprit que vous aurez besoin pour affecter l'img.attribut src d'APRÈS le gestionnaire onload a été définie pour certaines saveurs de l'ei. (cette petite friandise m'a coûté une heure de dépannage la semaine dernière.)

    Merci, je vais tester cela!
    Cela fonctionne parfaitement, mais pouvez-vous me l'expliquer un peu. Aussi, quand la "valeur"?
    la "valeur" représente la valeur de "i" étant passée dans la fonction à la clôture de l'img.onload affectation. Le sujet des "fermetures" est trop complexe à expliquer efficacement dans ce post, je vais donc laisser ce lien pour commencer: blog.morrisjohns.com/javascript_closures_for_dummies
    Quelque chose qui pourrait aider à comprendre le problème mennovanslooten.nl/blog/post/62
    Beaucoup de choses ont passé depuis que j'ai répondu à cette question en 2011. L'introduction de la let mot clé dans l'es6 a grandement simplifié ce scénario. Vous recommandons de consulter laissez-portée des variables dans les boucles for pour plus de détails.

    OriginalL'auteur Daniel Szabo