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

User · Accepted Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to jquery