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

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

Si no es así, ¿hay alguna manera de hacerlo?

Nov 11 '08 11:11

.complete+ devolución de llamada

Este es un método que cumple 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/promises/

Jun 13 '2014 08:06 Ciro Santilli OurBigBook.com

Image.onload() suele funcionar.

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

Enlaces relacionados:

Mozilla en Image.onload()

Uso de ejemplo:

    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>

Expandir fragmento

Nov 11 '2008 05:11 keparo