Comment puis-je savoir qu'un lot d'images est chargé?

Question

J'ai un kit de carte Javascript, et il utilise l'objet Image pour charger les images. Chaque fois que je déplace/redimensionne la carte, il va charger beaucoup d'images. Mais je veux savoir comment je peux déclencher une fonction lorsque toutes les images sont chargées après une action de déplacement/redimensionnement.

Y at-il un moyen de créer un écouteur comme "allimages.onload = function() {}"?

Ou y a-t-il une solution de contournement?

Answer 1

Vous devez tenir compte du nombre d'images à charger et appeler la fonction finale lorsque le nombre d'images en attente atteint 0. Par ex.

function nofunction() {} 

function loadImages(srcs, callback) { 
    var images= []; 
    var imagen= srcs.length; 
    for (var i= 0; i<srcs.length; i++) { 
     var image= new Image(); 
     image.onload=image.onerror= function() { 
      imagen--; 
      if (imagen==0) { 
       this.onload=this.onerror= nofunction; 
       callback(); 
      } 
     }; 
     image.src= srcs[i]; 
     images.push(image); 
    } 
    return images; 
} 

... 

var images= loadImages(['/img/1.gif', '/img/2.gif'], function() { 
    alert('yay'); 
}); 

for (var i= 0; i<images.length; i++) 
    mapelement.appendChild(images[i]); 

Answer 2

Il y a un moment que je l'ai écrit a blog post sur la détection de la charge d'une seule image. Vous pouvez utiliser l'exemple pour créer votre fonction qui vérifie si toutes les images sont chargées. J'espère que cela aidera.