javascript - pantalla - precargar imagenes jquery

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

Question

Estoy creando una nueva imagen usando

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

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

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

¿Cómo puedo saber que img.src se ha cargado al 100%? cual es la mejor practica? img.complete me parece poco buggy en algunos navegadores.

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

¡Gracias!

Answer 1

Usando el patrón de promesa:

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 cuando llamamos a la función podemos manejar su respuesta o error de manera bastante ordenada.

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

Answer 2

Utilice el evento de load :

img = new Image();
img.onload = function(){
// image has been loaded
};
img.src = image_url;

También eche un vistazo a:

• La precarga y el objeto Image () de JavaScript