neues Image(), wie zu wissen, ob Bild 100% geladen oder nicht?

Question

Ich neues Bild zu schaffen mit

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

Dann Zuweisung ich img.src auf die src des img-Tag in DOM

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

Wie kann ich wissen, dass img.src 100% geladen ? Was ist die beste Praxis? img.complete scheinen mir in einigen Browsern etwas Buggy.

Also, mit anderen Worten, ich muss img.src zu $("#my_img") nur nach img zuweisen wurde es zu 100% geladen.

Vielen Dank!

Answer 1

Verwenden Sie das load Ereignis:

img = new Image(); 

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

img.src = image_url; 

auch einen Blick haben:

• Preloading and the JavaScript Image() object

Answer 2

Mit dem Muster Versprechen:

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 
     }) 
    } 

Und wenn wir die Funktion aufrufen, können wir ihre Antwort oder ihren Fehler ganz ordentlich behandeln.

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