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

Question

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!

Answer 1

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

Answer 2

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