¿Cómo crear una callback de JavaScript para saber cuándo se carga una imagen?

Quiero saber cuándo se terminó de cargar una imagen. ¿Hay alguna manera de hacerlo con una callback?

Si no, ¿hay alguna manera de hacerlo?

.complete + callback es compatible con los estándares, no es una forma de biblioteca. Esto no espera más de lo necesario:

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

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

Image.onload () a menudo funcionará.

Para usarlo, deberá asegurarse de vincular el controlador de eventos antes de establecer el atributo src.

Enlaces relacionados:

  • Mozilla en Image.onload ()

Ejemplo de uso:

   Image onload()       

Puede usar la propiedad .complete de la clase de imagen de Javascript.

Tengo una aplicación en la que almaceno una cantidad de objetos de imagen en una matriz, que se agregará dinámicamente a la pantalla, y mientras se cargan, escribo actualizaciones en otro div en la página. Aquí hay un fragmento de código:

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

Puede usar load () – event en jQuery pero no siempre se activará si la imagen se carga desde el caché del navegador. Este complemento https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js se puede usar para solucionar ese problema.

La vida es demasiado corta para 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') }); 
  

Aquí está el equivalente de jQuery:

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

estas funciones resolverán el problema, debe implementar la función DrawThumbnails y tener una variable global para almacenar las imágenes. Me encanta hacer que esto funcione con un objeto de clase que tiene el ThumbnailImageArray como una variable miembro, ¡pero estoy luchando!

llamado como en 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 está utilizando React.js, podría hacer esto:

 render() { 

// …

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

// …}

Dónde:

  • – onLoad (…) ahora se llamará con algo como esto: {src: ” https: //……png “, clave: “1”} puede usar esto como “clave” para saber qué imágenes está cargado correctamente y cual no.
  • – onError (…) es lo mismo pero para errores.
  • – El objeto “elemento” es algo así como {key: “..”, src: “..”} que puede usar para almacenar la URL y la clave de las imágenes para usarlas en una lista de imágenes.