How can I determine if an image has loaded using Javascript jQuery

Question

I m writing some Javascript to resize the large image to fit into the user s browser window    I don t control the size of the source images unfortunately    So something like this would be in the HTML    lt img id  photo       src  a really big file jpg       alt  this is some alt text       title  this is some title text    gt    Is there a way for me to determine if the src image in an img tag has been downloaded   I need this because I m running into a problem if   document  ready   is executed before the browser has loaded the image       photo   width   and     photo   height   will return the size of the placeholder  the alt text    In my case this is something like 134 x 20   Right now I m just checking if the photo s height is less than 150  and assuming that if so it is just alt text   But this is quite a hack  and it would break if a photo is less than 150 pixels tall  not likely in my particular case   or if the alt text is more than 150 pixels tall  could possibly happen on a small browser window      Edit  For anyone wanting to see the code     function       var REAL WIDTH       photo   width      var REAL HEIGHT       photo   height         window  resize adjust photo size     adjust photo size       function adjust photo size           if REAL HEIGHT  lt  150              REAL WIDTH       photo   width          REAL HEIGHT       photo   height          if REAL HEIGHT  lt  150                    image not loaded   try again in a quarter-second         setTimeout adjust photo size  250           return                     var new width               var new height                    photo   width Math round new width            photo   height Math round new height                 Update  Thanks for the suggestions   There is a risk of the event not being fired if I set a callback for the     photo   load event  so I have defined an onLoad event directly on the image tag   For the record  here is the code I ended up going with    lt img id  photo       onload  photoLoaded          src  a really big file jpg       alt  this is some alt text       title  this is some title text    gt    Then in Javascript     This must be outside     because it may get called first var isPhotoLoaded   false  function photoLoaded       isPhotoLoaded   true       function         Hides scrollbars  so we can resize properly   Set with JS instead of       CSS so that page doesn t break with JS disabled       body   css  overflow    hidden       var REAL WIDTH   -1    var REAL HEIGHT   -1       window  resize adjust photo size     adjust photo size       function adjust photo size           if  isPhotoLoaded                image not loaded   try again in a quarter-second       setTimeout adjust photo size  250         return            else if REAL WIDTH  lt  0                first time in this function since photo loaded       REAL WIDTH       photo   width          REAL HEIGHT       photo   height               var new width               var new height                    photo   width Math round new width            photo   height Math round new height

User · Accepted Answer

Either add an event listener  or have the image announce itself with onload  Then figure out the dimensions from there    lt img id  photo       onload  loaded this id        src  a really big file jpg       alt  this is some alt text       title  this is some title text    gt

User · Answer

Try something like       photo   load function         alert  Hello from Image

User · Answer

Try something like       photo   load function         alert  Hello from Image

User · Answer

There s a jQuery plugin called  imagesLoaded  that provides a cross-browser compatible method to check if an element s image s  have been loaded   Site  https   github com desandro imagesloaded   Usage for a container that has many images inside      container   imagesLoaded function     console log  I loaded          The plugin is great    works for checking a container with many images inside works for check an img to see if it has loaded

User · Answer

The right answer  is to use event special load     It is possible that the load event will not be triggered if the image is loaded from the browser cache  To account for this possibility  we can use a special load event that fires immediately if the image is ready  event special load is currently available as a plugin    Per the docs on  load

User · Answer

This function checks if an image is loaded based on having measurable dimensions  This technique is useful if your script is executing after some of the images have already been loaded   imageLoaded   function node        var w    undefined     typeof node clientWidth   node clientWidth   node offsetWidth      var h    undefined     typeof node clientHeight   node clientHeight   node offsetHeight      return w h  gt  0   true   false

User · Answer

We developed a page where it loaded a number of images and then performed other functions only after the image was loaded  It was a busy site that generated a lot of traffic  It seems that the following simple script worked on practically all browsers     elem  onload   function         doSomething        BUT THIS IS A POTENTIAL ISSUE FOR IE9   The ONLY browser we had reported issues on is IE9  Are we not surprised  It seems that the best way to solve the issue there is to not assign a src to the image until AFTER the onload function has been defined  like so     elem  onload   function         doSomething        elem  attr  src   theimage png      It seems that IE 9 will sometimes not throw the onload event for whatever reason  Other solutions on this page  such as the one from Evan Carroll  for example  still did not work    Logically  that checked if the load state was already successful and triggered the function and if it wasn t  then set the onload handler  but even when you do that we demonstrated in testing that the image could load between those two lines of js thereby appearing not loaded to the first line and then loading before the onload handler is set   We found that the best way to get what you want is to not define the image s src until you have set the onload event trigger   We only just recently stopped supporting IE8 so I can t speak for versions prior to IE9  otherwise  out of all the other browsers that were used on the site -- IE10 and 11 as well as Firefox  Chrome  Opera  Safari and whatever mobile browser people were using -- setting the src before assigning the onload handler was not even an issue

User · Answer

I find that this simple solution works best for me           function setEqualHeight a  b                if     a  height                      return window setTimeout function    setEqualHeight a  b      1000                               b  height   a  height                          document  ready function                 setEqualHeight   image     description                  window  resize function   setEqualHeight   image     description                       lt  script gt

User · Answer

We developed a page where it loaded a number of images and then performed other functions only after the image was loaded  It was a busy site that generated a lot of traffic  It seems that the following simple script worked on practically all browsers     elem  onload   function         doSomething        BUT THIS IS A POTENTIAL ISSUE FOR IE9   The ONLY browser we had reported issues on is IE9  Are we not surprised  It seems that the best way to solve the issue there is to not assign a src to the image until AFTER the onload function has been defined  like so     elem  onload   function         doSomething        elem  attr  src   theimage png      It seems that IE 9 will sometimes not throw the onload event for whatever reason  Other solutions on this page  such as the one from Evan Carroll  for example  still did not work    Logically  that checked if the load state was already successful and triggered the function and if it wasn t  then set the onload handler  but even when you do that we demonstrated in testing that the image could load between those two lines of js thereby appearing not loaded to the first line and then loading before the onload handler is set   We found that the best way to get what you want is to not define the image s src until you have set the onload event trigger   We only just recently stopped supporting IE8 so I can t speak for versions prior to IE9  otherwise  out of all the other browsers that were used on the site -- IE10 and 11 as well as Firefox  Chrome  Opera  Safari and whatever mobile browser people were using -- setting the src before assigning the onload handler was not even an issue

User · Answer

I just created a jQuery function to load an image using jQuerys Deferred Object which makes it very easy to react on load error event     fn extend       loadImg  function url  timeout               init deferred object         var defer     Deferred                 img   this              img    img get 0               timer   null              define load and error events BEFORE setting the src            otherwise IE might fire the event before listening to it          img load function e                var that   this                 defer this check in order to let IE catch the right image size             window setTimeout function                        make sure the width and height are  gt  0                   that width  gt  0  amp  amp  that height  gt  0                         defer resolveWith                        defer rejectWith   img                  1              error function e                defer rejectWith  img                           start loading the image         img src   url              check if it s already in the cache         if  img complete                defer resolveWith  img             else if  0     timeout                   add a timeout  by default 15 seconds             timer   window setTimeout function                     defer rejectWith  img                  timeout    15000                         return the promise of the deferred object         return defer promise   always function                    stop the timeout timer             window clearTimeout timer               timer   null                 unbind the load and error event             this off  load error                            Usage   var image       lt img   gt    loadImg  http   www google com intl en com images srpr logo3w png    done function         alert  image loaded           body   append this      fail function        alert  image failed          See it working at  http   jsfiddle net roberkules AdWZj

User · Answer

Try something like       photo   load function         alert  Hello from Image

User · Answer

Using the jquery data store you can define a  loaded  state    lt img id  myimage  onload    this  data  loaded    loaded     src  lolcats jpg    gt    Then elsewhere you can do   if      myimage   data  loaded             loaded  so do stuff

User · Answer

Using the jquery data store you can define a  loaded  state    lt img id  myimage  onload    this  data  loaded    loaded     src  lolcats jpg    gt    Then elsewhere you can do   if      myimage   data  loaded             loaded  so do stuff

User · Answer

Try something like       photo   load function         alert  Hello from Image

User · Answer

May I suggest a pure CSS solution altogether   Just have a Div that you want to show the image in  Set the image as background  Then have the property background-size  cover or background-size  contain depending on how you want it   cover will crop the image until smaller sides cover the box  contain will keep the entire image inside the div  leaving you with spaces on sides   Check the snippet below    x000D   x000D  div   x000D    height  300px  x000D    width  300px  x000D    border  3px dashed grey  x000D    background-position  center  x000D    background-repeat  no-repeat  x000D    x000D   x000D   cover-image   x000D    background-size  cover  x000D    x000D   x000D   contain-image   x000D    background-size  contain  x000D    x000D   lt div class  cover-image  style  background-image url https   assets1 ignimgs com 2019 04 25 avengers-endgame-1280y-1556226255823 1280w jpg   gt  x000D   lt  div gt  x000D   lt br  gt  x000D   lt div class  contain-image  style  background-image url https   assets1 ignimgs com 2019 04 25 avengers-endgame-1280y-1556226255823 1280w jpg   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Any comments on this one        doShow   function      if     img id   attr  complete         alert  Image is loaded         else       window setTimeout  doShow    100               img id   attr  src   image jpg     doShow           Seems like works everywhere

User · Answer

You want to do what Allain said  however be aware that sometimes the image loads before dom ready  which means your load handler won t fire  The best way is to do as Allain says  but set the src of the image with javascript after attaching the load hander  This way you can guarantee that it fires   In terms of accessibility  will your site still work for people without javascript  You may want to give the img tag the correct src  attach you dom ready handler to run your js  clear the image src  give it a fixed with and height with css to prevent the page flickering   then set your img load handler  then reset the src to the correct file  This way you cover all bases

User · Answer

Any comments on this one        doShow   function      if     img id   attr  complete         alert  Image is loaded         else       window setTimeout  doShow    100               img id   attr  src   image jpg     doShow           Seems like works everywhere

User · Answer

The right answer  is to use event special load     It is possible that the load event will not be triggered if the image is loaded from the browser cache  To account for this possibility  we can use a special load event that fires immediately if the image is ready  event special load is currently available as a plugin    Per the docs on  load

User · Answer

You want to do what Allain said  however be aware that sometimes the image loads before dom ready  which means your load handler won t fire  The best way is to do as Allain says  but set the src of the image with javascript after attaching the load hander  This way you can guarantee that it fires   In terms of accessibility  will your site still work for people without javascript  You may want to give the img tag the correct src  attach you dom ready handler to run your js  clear the image src  give it a fixed with and height with css to prevent the page flickering   then set your img load handler  then reset the src to the correct file  This way you cover all bases

User · Answer

I found this worked for me  document querySelector  img   addEventListener  load   function     alert  onload           Credit goes totaly to Frank Schwieterman  who commented on accepted answer  I had to put this here  it s too valuable

User · Answer

This function checks if an image is loaded based on having measurable dimensions  This technique is useful if your script is executing after some of the images have already been loaded   imageLoaded   function node        var w    undefined     typeof node clientWidth   node clientWidth   node offsetWidth      var h    undefined     typeof node clientHeight   node clientHeight   node offsetHeight      return w h  gt  0   true   false

User · Answer

I just created a jQuery function to load an image using jQuerys Deferred Object which makes it very easy to react on load error event     fn extend       loadImg  function url  timeout               init deferred object         var defer     Deferred                 img   this              img    img get 0               timer   null              define load and error events BEFORE setting the src            otherwise IE might fire the event before listening to it          img load function e                var that   this                 defer this check in order to let IE catch the right image size             window setTimeout function                        make sure the width and height are  gt  0                   that width  gt  0  amp  amp  that height  gt  0                         defer resolveWith                        defer rejectWith   img                  1              error function e                defer rejectWith  img                           start loading the image         img src   url              check if it s already in the cache         if  img complete                defer resolveWith  img             else if  0     timeout                   add a timeout  by default 15 seconds             timer   window setTimeout function                     defer rejectWith  img                  timeout    15000                         return the promise of the deferred object         return defer promise   always function                    stop the timeout timer             window clearTimeout timer               timer   null                 unbind the load and error event             this off  load error                            Usage   var image       lt img   gt    loadImg  http   www google com intl en com images srpr logo3w png    done function         alert  image loaded           body   append this      fail function        alert  image failed          See it working at  http   jsfiddle net roberkules AdWZj

User · Answer

I find that this simple solution works best for me           function setEqualHeight a  b                if     a  height                      return window setTimeout function    setEqualHeight a  b      1000                               b  height   a  height                          document  ready function                 setEqualHeight   image     description                  window  resize function   setEqualHeight   image     description                       lt  script gt

User · Answer

I found this worked for me  document querySelector  img   addEventListener  load   function     alert  onload           Credit goes totaly to Frank Schwieterman  who commented on accepted answer  I had to put this here  it s too valuable

User · Answer

As per one of the recent comments to your original question    function          window  resize adjust photo size     adjust photo size       function adjust photo size          if       photo   get 0  complete               photo   load function               adjust photo size                     else                          Warning This answer could cause a serious loop in ie8 and lower  because img complete is not always properly set by the browser  If you must support ie8  use a flag to remember the image is loaded

User · Answer

There s a jQuery plugin called  imagesLoaded  that provides a cross-browser compatible method to check if an element s image s  have been loaded   Site  https   github com desandro imagesloaded   Usage for a container that has many images inside      container   imagesLoaded function     console log  I loaded          The plugin is great    works for checking a container with many images inside works for check an img to see if it has loaded

User · Answer

As per one of the recent comments to your original question    function          window  resize adjust photo size     adjust photo size       function adjust photo size          if       photo   get 0  complete               photo   load function               adjust photo size                     else                          Warning This answer could cause a serious loop in ie8 and lower  because img complete is not always properly set by the browser  If you must support ie8  use a flag to remember the image is loaded

User · Answer

You want to do what Allain said  however be aware that sometimes the image loads before dom ready  which means your load handler won t fire  The best way is to do as Allain says  but set the src of the image with javascript after attaching the load hander  This way you can guarantee that it fires   In terms of accessibility  will your site still work for people without javascript  You may want to give the img tag the correct src  attach you dom ready handler to run your js  clear the image src  give it a fixed with and height with css to prevent the page flickering   then set your img load handler  then reset the src to the correct file  This way you cover all bases

User · Answer

You want to do what Allain said  however be aware that sometimes the image loads before dom ready  which means your load handler won t fire  The best way is to do as Allain says  but set the src of the image with javascript after attaching the load hander  This way you can guarantee that it fires   In terms of accessibility  will your site still work for people without javascript  You may want to give the img tag the correct src  attach you dom ready handler to run your js  clear the image src  give it a fixed with and height with css to prevent the page flickering   then set your img load handler  then reset the src to the correct file  This way you cover all bases

User · Answer

May I suggest a pure CSS solution altogether   Just have a Div that you want to show the image in  Set the image as background  Then have the property background-size  cover or background-size  contain depending on how you want it   cover will crop the image until smaller sides cover the box  contain will keep the entire image inside the div  leaving you with spaces on sides   Check the snippet below    x000D   x000D  div   x000D    height  300px  x000D    width  300px  x000D    border  3px dashed grey  x000D    background-position  center  x000D    background-repeat  no-repeat  x000D    x000D   x000D   cover-image   x000D    background-size  cover  x000D    x000D   x000D   contain-image   x000D    background-size  contain  x000D    x000D   lt div class  cover-image  style  background-image url https   assets1 ignimgs com 2019 04 25 avengers-endgame-1280y-1556226255823 1280w jpg   gt  x000D   lt  div gt  x000D   lt br  gt  x000D   lt div class  contain-image  style  background-image url https   assets1 ignimgs com 2019 04 25 avengers-endgame-1280y-1556226255823 1280w jpg   gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] How can I determine if an image has loaded, using Javascript/jQuery?

Examples related to javascript

Examples related to jquery

Examples related to image