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