¿Cómo puedo ejecutar una devolución de llamada de JavaScript cuando se carga una imagen?

Question 1

Quiero saber cuando una imagen ha terminado de cargarse. ¿Hay alguna manera de hacerlo con una devolución de llamada?

Si no, ¿hay alguna manera de hacerlo?

Question 2

.complete + devolución de llamada

Este es un método compatible con los estándares sin dependencias adicionales y 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/promesas/

Question 3

Imagen.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:

    window.onload = function () {

        var logo = document.getElementById('sologo');

        logo.onload = function () {
            alert ("The image has loaded!");		
        };

        setTimeout(function(){
            logo.src="https://edmullen.net/test/rc.jpg";         
        }, 5000);
    };

 <html>
    <head>
    <title>Image onload()</title>
    </head>
    <body>

    <img src="#" alt="This image is going to load" id="sologo"/>

    <script type="text/javascript">

    </script>
    </body>
    </html>

Question 4

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án 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 = "https://stackoverflow.com/questions/280049/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);
}

Question 5

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

<img id="myImage" src="">

Question 6

Puede usar el evento load() 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 puede usarse para remediar ese problema.

Question 7

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

Question 8

Si el objetivo es diseñar el img después de que el navegador haya renderizado la imagen, debe:

const img = new Image();
img.src="https://stackoverflow.com/questions/280049/path/to/img.jpg";

img.decode().then(() => {
/* set styles */
/* add img to DOM */ 
});

porque el navegador primero loads the compressed version of imageentonces decodes itfinalmente paints él. ya que no hay evento para paint debe ejecutar su lógica después de que el navegador haya decoded la etiqueta img.

¿Ha sido útil esta solución?