Comment créer un rappel JavaScript pour savoir quand une image est chargée?

Je veux savoir quand une image a fini de charger. Est-il possible de le faire avec un rappel?

Sinon, existe-t-il un moyen de le faire?

    .complete + callback est une norme, pas de bibliothèque. Cela n’attend plus que nécessaire:

     var img = document.querySelector('img') function loaded() { alert('loaded') } if (img.complete) { loaded() } else { img.addEventListener('load', loaded) img.addEventListener('error', function() { alert('error') }) } 

    Source: http://www.html5rocks.com/en/tutorials/es6/promises/

    Image.onload () fonctionnera souvent.

    Pour l’utiliser, vous devez être sûr de lier le gestionnaire d’événements avant de définir l’atsortingbut src.

    Liens connexes:

    • Mozilla sur Image.onload ()

    Exemple d’utilisation:

       Image onload()       

    Vous pouvez utiliser la propriété .complete de la classe d’images Javascript.

    J’ai une application où je stocke un certain nombre d’objects Image dans un tableau, qui seront ajoutés dynamicment à l’écran, et au fur et à mesure de leur chargement, j’écris les mises à jour sur un autre div de la page. Voici un extrait de code:

     var gAllImages = []; function makeThumbDivs(thumbnailsBegin, thumbnailsEnd) { gAllImages = []; for (var i = thumbnailsBegin; i < thumbnailsEnd; i++) { var theImage = new Image(); theImage.src = "thumbs/" + getFilename(globals.gAllPageGUIDs[i]); gAllImages.push(theImage); setTimeout('checkForAllImagesLoaded()', 5); window.status="Creating thumbnail "+(i+1)+" of " + thumbnailsEnd; // make a new div containing that image makeASingleThumbDiv(globals.gAllPageGUIDs[i]); } } function checkForAllImagesLoaded() { for (var i = 0; i < gAllImages.length; i++) { if (!gAllImages[i].complete) { var percentage = i * 100.0 / (gAllImages.length); percentage = percentage.toFixed(0).toString() + ' %'; userMessagesController.setMessage("loading... " + percentage); setTimeout('checkForAllImagesLoaded()', 20); return; } } userMessagesController.setMessage(globals.defaultTitle); } 

    Vous pouvez utiliser l’événement load () dans jQuery mais il ne sera pas toujours déclenché si l’image est chargée depuis le cache du navigateur. Ce plugin https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js peut être utilisé pour remédier à ce problème.

    La vie est trop courte pour jquery.

     function waitForImageToLoad(imageElement){ return new Promise(resolve=>{imageElement.onload = resolve}) } var myImage = document.getElementById('myImage'); var newImageSrc = "https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620" myImage.src = newImageSrc; waitForImageToLoad(myImage).then(()=>{ // Image have loaded. console.log('Loaded lol') }); 
      

    Voici l’équivalent de jQuery:

     var $img = $('img'); if ($img.length > 0 && !$img.get(0).complete) { $img.on('load', sortingggerAction); } function sortingggerAction() { alert('img has been loaded'); } 

    ces fonctions vont résoudre le problème, vous devez implémenter la fonction DrawThumbnails et avoir une variable globale pour stocker les images. J’aime faire en sorte que cela fonctionne avec un object de classe qui a le ThumbnailImageArray comme variable de membre, mais j’ai du mal!

    appelé comme dans addThumbnailImages(10);

     var ThumbnailImageArray = []; function addThumbnailImages(MaxNumberOfImages) { var imgs = []; for (var i=1; i0) { if(c != i) images[c] = images[i]; c++; } } images.length = c; DrawThumbnails(); }); } function preloadimages(arr) { var loadedimages=0 var postaction=function(){} var arr=(typeof arr!="object")? [arr] : arr function imageloadpost() { loadedimages++; if (loadedimages==arr.length) { postaction(ThumbnailImageArray); //call postaction and pass in newimages array as parameter } }; for (var i=0; i 

    Si vous utilisez React.js, vous pouvez le faire:

     render() { 

    // …

      this.onImgLoad({ item })} onError={() => this.onImgLoad({ item })} src={item.src} key={item.key} ref={item.key} /> 

    // …}

    Où:

  • – onLoad (…) va maintenant appeler avec quelque chose comme ceci: {src: ” https: //……png “, clé: “1”} vous pouvez l’utiliser comme “clé” pour savoir quelles images est chargé correctement et qui non.
  • – onError (…) c’est pareil mais pour les erreurs.
  • – l’object “item” est quelque chose comme ceci: {key: “..”, src: “..”} vous pouvez utiliser pour stocker l’URL et la clé des images afin de les utiliser dans une liste d’images.