new Image(), comment savoir si l'image est chargée à 100% ou non?

Question

Je crée de nouvelles images en utilisant

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

Alors j'assignant img.src à la src de la balise img dans DOM

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

Comment puis-je savoir que img.src a atteint 100% ? Quelle est la meilleure pratique? img.complete me semble un peu buggé dans certains navigateurs. Donc, en d'autres termes, je dois assigner img.src à $("#my_img") seulement après img il a été chargé à 100%.

Merci!

Answer 1

Utilisez l'événement load:

img = new Image(); 

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

img.src = image_url; 

ont également un oeil à:

• Preloading and the JavaScript Image() object

Answer 2

Utilisation du modèle 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 
     }) 
    } 

Et lorsque vous appelez la fonction, nous pouvons gérer sa réponse ou son erreur tout à fait proprement.

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