new Image(), how to know if image 100% loaded or not?

I'm creating new image using

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

Then I'm assigning img.src to the img tag's src in DOM

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

How can I know that img.src has 100% loaded? What is the best practice? img.complete seem to me little buggy in some browsers.

So, in another words, I need to assign img.src to $("#my_img") only after img it was 100% loaded.

Thank you!

2 Answers

Use the load event:

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

Also have a look at:

• Preloading and the JavaScript Image() object

Using the Promise pattern:

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

And when calling the function we can handle its response or error quite neatly.

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