J'utilise la fonction de canevas de HTML5. J'ai des images pour dessiner sur la toile et j'ai besoin de vérifier qu'ils ont tous chargé avant que je puisse les utiliser.
Je les ai déclarés à l'intérieur d'une matrice, j'ai besoin d'une façon de vérifier s'ils ont tous chargé à le même temps, mais je ne sais pas comment faire cela.
Voici mon code: actuellement pour vérifier si les images ont chargé, je devrait le faire un par un comme si: Si j'avais beaucoup d'images, que je serai plus tard dans le développement, ce serait une manière vraiment inefficace de Vérifier tous. Comment puis-je les vérifier en même temps?
7 Réponses :
Utilisez la fenêtre .Onload code> qui déclenche lorsque tous les images window.onload = function(){
// your code here........
};
Cela ne semble pas le résoudre. J'ai mis en place la fenêtre.Enload Manutention d'événement autour de l'appelant de la fonction qui commence tout le script, mais elle fonctionne toujours trop tôt.
Cela ne fonctionne pas non plus si les nœuds DOM de vos images sont créés après l'événement de la fenêtre.
Un moyen pirateux de le faire est d'ajouter la commande JS dans un autre fichier et de le placer dans le pied de page. Cette façon, il charge la dernière fois.
Cependant, en utilisant jQuery (document) .Ready fonctionne également mieux que la fenêtre natale.Onload.
vous utilisez chrome, n'est-ce pas?
Yah, la fenêtre.onload courir tôt est un bug chrome. Vous pouvez utiliser le navigateur reniflant avec un depostime pour le retarder pour le chrome spécifiquement.
Ce n'est pas une réponse à la question. Pourquoi est-ce marqué comme tel?
Parce que la réponse à / sa question était "Vous utilisez un chrome et voyez un bogue". Tout en ajoutant un écouteur d'événement à chaque image est une solution possible à un problème générique, ce n'était pas celui qui a résolu / son problème.
Vous ne pouvez pas simplement utiliser une boucle et affecter la même fonction à tous les surlogements?
var myImages = ["green.png", "blue.png"];
(function() {
var imageCount = myImages.length;
var loadedCount = 0, errorCount = 0;
var checkAllLoaded = function() {
if (loadedCount + errorCount == imageCount ) {
// do what you need to do.
}
};
var onload = function() {
loadedCount++;
checkAllLoaded();
}, onerror = function() {
errorCount++;
checkAllLoaded();
};
for (var i = 0; i < imageCount; i++) {
var img = new Image();
img.onload = onload;
img.onerror = onerror;
img.src = myImages[i];
}
})();
Si vous souhaitez appeler une fonction lorsque toutes les images sont chargées, vous pouvez essayer de suivre, cela a fonctionné pour moi
var imageCount = images.length;
var imagesLoaded = 0;
for(var i=0; i<imageCount; i++){
images[i].onload = function(){
imagesLoaded++;
if(imagesLoaded == imageCount){
allLoaded();
}
}
}
function allLoaded(){
drawImages();
}
juste Vous pouvez utiliser ASYNC attendre pour chaîner la boucle pour suivre la chargement de l'image de manière synchrone. < / p> mais l'inconvénient de cette méthode augmente le temps de chargement, car toutes les images se chargent de manière synchrone. << aussi Vous pouvez également utiliser un ou simplement utiliser Cette approche Pour faire un rappel après que toutes les images soient chargées. Tout dépend de ce que vous voulez faire. J'espère que cela aidera à quelqu'un. surcharger méthode dans pour la boucle ne résout pas cette tâche, car Onload est exécutant de manière asynchrone dans la boucle. Donc, que des images plus grandes au milieu d'une boucle peuvent être ignorées au cas où vous avez une sorte de rappel uniquement pour la dernière image de la boucle.
simple Pour boucle et exécuter le rappel
Essayez ce code:
<div class="image-wrap" data-id="2">
<img src="https://www.hd-wallpapersdownload.com/script/bulk-upload/desktop-free-peacock-feather-images-dowload.jpg" class="img-load" data-id="1">
<i class="fa fa-spinner fa-spin loader-2" style="font-size:24px"></i>
</div>
<div class="image-wrap" data-id="3">
<img src="http://diagramcenter.org/wp-content/uploads/2016/03/image.png" class="img-load" data-id="1">
<i class="fa fa-spinner fa-spin loader-3" style="font-size:24px"></i>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
var allImages = jQuery(".img-load").length;
jQuery(".img-load").each(function(){
var image = jQuery(this);
jQuery('<img />').attr('src', image.attr('src')).one("load",function(){
var dataid = image.parent().attr('data-id');
console.log(dataid);
console.log('load');
});
});
});
</script>
La solution avec p> promesse code> serait:
const images = [new Image(), new Image()]
for (const image of images) {
image.src = 'https://picsum.photos/200'
}
function imageIsLoaded(image) {
return new Promise(resolve => {
image.onload = () => resolve()
image.onerror = () => resolve()
})
}
Promise.all(images.map(imageIsLoaded)).then(() => {
alert('All images are loaded')
})
Pourquoi? qu'est-ce que promett-il faire ??
Il attend jusqu'à ce que toutes les images soient chargées