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!

you can also add a check to img.complete for img.naturalWidth see http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript — fadomire, Aug 25 '15 at 17:05

score 71 · Accepted Answer · edited Sep 24 '13 at 19:15

71

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

edited Sep 24 '13 at 19:15

Community

1
1

answered Aug 18 '10 at 10:43

Sarfraz

377,238
77
533
578

Is this solution crossbrowser? – Kirzilla Aug 18 '10 at 10:46
@Kirzilla: I think so, you should give it a try :) – Sarfraz Aug 18 '10 at 10:48
3

I believe that onload is only triggered if the image is actually loaded anew. If the image is cached, then onload will not be triggered. Can anyone confirm? – Andy Swift Mar 31 '15 at 11:02
2

Can i find **MIME** type of file using above image object – Saravanan Jul 27 '15 at 22:40
Does anyone happen to know: when is the img making the http request? Is it when img.src is being changed? – Weishi Z May 26 '16 at 00:03
@AndrewSwift: Images have `complete` property. Try `if(img.complete) console.log('already loaded')` – fregante Oct 03 '16 at 10:35
For anyone in the future concerned due to @AndrewSwift's comment, as long as onload is set BEFORE src is set, it's fine. – Gyuhyeon Lee Apr 25 '19 at 13:37

score 25 · Answer 2 · answered Sep 09 '16 at 16:16

25

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

answered Sep 09 '16 at 16:16

Watchmaker

4,908
1
37
38

This is a better solution IMO. if OP is using jQuery as tagged he can do `$.when.apply($, [])` where "`[]`" is an array of promises (i.e. support for multiple images). Worth noting the support on native promises also. – AndFisher Dec 05 '16 at 16:31
awesome answer! – SuperStar518 Jan 04 '19 at 01:44
Beautiful answer. – EliT Mar 22 '19 at 04:39
Great solution, but I suggest to use `(successUrl) => { //do stufff }).catch((errorUrl) => { //do stuff })` (basically use `(param) =>` instead of `function(param)` because in this way if you need to use `this` inside the promise you still have the original reference) – Heichou Sep 09 '20 at 00:04

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

2 Answers2

Linked