nueva Imagen(), cómo saber si la imagen está cargada al 100% o no?

Question

estoy creando nueva imagen usando

img = new Image(); 
img.src = image_url; 

Entonces estoy asignando a img.src src de la etiqueta img en DOM

$("#my_img").attr("src", img.src); 

¿Cómo puedo saber que tiene img.src 100% cargada ? cual es la mejor practica? img.complete me parece pequeño error en algunos navegadores.

Entonces, en otras palabras, necesito asignar img.src a $("#my_img") solo después de img que fue 100% cargado.

¡Gracias!

Answer 1

Usar la load evento:

img = new Image(); 

img.onload = function(){ 
    // image has been loaded 
}; 

img.src = image_url; 

también echar un vistazo a:

• Preloading and the JavaScript Image() object

Answer 2

Utilizando el patrón de Promise:

function getImage(url){ 
     return new Promise(function(resolve, reject){ 
      var img = new Image() 
      img.onload = function(){ 
       resolve(url) 
      } 
      img.onerror = function(){ 
       reject(url) 
      } 
      img.src = url 
     }) 
    } 

Y al llamar a la función, podemos manejar su respuesta o error bastante bien.

getImage('imgUrl').then(function(successUrl){ 
    //do stufff 
}).catch(function(errorUrl){ 
    //do stuff 
})