How to create a JavaScript callback for knowing when an image is loaded

Question

I want to know when an image has finished loading  Is there a way to do it with a callback   If not  is there a way to do it at all

User · Answer

Image onload   will often work     To use it  you ll need to be sure to bind the event handler before you set the src attribute   Related Links    Mozilla on Image onload     Example Usage    x000D   x000D      window onload   function      x000D   x000D          var logo   document getElementById  sologo    x000D   x000D          logo onload   function      x000D              alert   The image has loaded       x000D             x000D   x000D          setTimeout function    x000D              logo src    https   edmullen net test rc jpg            x000D             5000   x000D         x000D    lt html gt  x000D       lt head gt  x000D       lt title gt Image onload   lt  title gt  x000D       lt  head gt  x000D       lt body gt  x000D   x000D       lt img src     alt  This image is going to load  id  sologo   gt  x000D   x000D       lt script type  text javascript  gt  x000D   x000D       lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

Image onload   will often work     To use it  you ll need to be sure to bind the event handler before you set the src attribute   Related Links    Mozilla on Image onload     Example Usage    x000D   x000D      window onload   function      x000D   x000D          var logo   document getElementById  sologo    x000D   x000D          logo onload   function      x000D              alert   The image has loaded       x000D             x000D   x000D          setTimeout function    x000D              logo src    https   edmullen net test rc jpg            x000D             5000   x000D         x000D    lt html gt  x000D       lt head gt  x000D       lt title gt Image onload   lt  title gt  x000D       lt  head gt  x000D       lt body gt  x000D   x000D       lt img src     alt  This image is going to load  id  sologo   gt  x000D   x000D       lt script type  text javascript  gt  x000D   x000D       lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

these functions will solve the problem  you need to implement the DrawThumbnails function and have a global variable to store the images  I love to get this to work with a class object that has the ThumbnailImageArray as a member variable  but am struggling    called as in addThumbnailImages 10    var ThumbnailImageArray        function addThumbnailImages MaxNumberOfImages        var imgs            for  var i 1  i lt MaxNumberOfImages  i                  imgs push i   jpeg               preloadimages imgs  done function  images               var c 0               for var i 0  i lt images length  i                                  if images i  width  gt 0                                         if c    i                          images c    images i                       c                                                 images length   c               DrawThumbnails                     function preloadimages arr        var loadedimages 0     var postaction function         var arr  typeof arr   object     arr    arr      function imageloadpost                 loadedimages            if  loadedimages  arr length                        postaction ThumbnailImageArray     call postaction and pass in newimages array as parameter                       for  var i 0  i lt arr length  i                  ThumbnailImageArray i  new Image            ThumbnailImageArray i  src arr i           ThumbnailImageArray i  onload function    imageloadpost              ThumbnailImageArray i  onerror function    imageloadpost                  return blank object with done   method           remember user defined callback functions to be called when images load     return    done function f   postaction f    postaction

User · Answer

You can use the  complete property of the Javascript image class   I have an application where I store a number of Image objects in an array  that will be dynamically added to the screen  and as they re loading I write updates to another div on the page   Here s a code snippet   var gAllImages        function makeThumbDivs thumbnailsBegin  thumbnailsEnd        gAllImages            for  var i   thumbnailsBegin  i  lt  thumbnailsEnd  i                   var theImage   new Image            theImage src    thumbs     getFilename globals gAllPageGUIDs i            gAllImages push theImage            setTimeout  checkForAllImagesLoaded     5           window status  Creating thumbnail    i 1    of     thumbnailsEnd              make a new div containing that image         makeASingleThumbDiv globals gAllPageGUIDs i             function checkForAllImagesLoaded         for  var i   0  i  lt  gAllImages length  i              if   gAllImages i  complete                var percentage   i   100 0    gAllImages length               percentage   percentage toFixed 0  toString                        userMessagesController setMessage  loading        percentage               setTimeout  checkForAllImagesLoaded     20               return                       userMessagesController setMessage globals defaultTitle

User · Answer

If you are using React js  you could do this   render                 lt img  onLoad       gt  this onImgLoad   item     onError       gt  this onImgLoad   item      src  item src  key  item key  ref  item key    gt                  Where  - onLoad       now will called with something like this    src   https         png   key  1    you can use this as  key  to know which images is loaded correctly and which not  - onError      it is the same but for errors  - the object  item  is something like this   key       src        you can use to store the images  URL and key in order to use in a list of images

User · Answer

these functions will solve the problem  you need to implement the DrawThumbnails function and have a global variable to store the images  I love to get this to work with a class object that has the ThumbnailImageArray as a member variable  but am struggling    called as in addThumbnailImages 10    var ThumbnailImageArray        function addThumbnailImages MaxNumberOfImages        var imgs            for  var i 1  i lt MaxNumberOfImages  i                  imgs push i   jpeg               preloadimages imgs  done function  images               var c 0               for var i 0  i lt images length  i                                  if images i  width  gt 0                                         if c    i                          images c    images i                       c                                                 images length   c               DrawThumbnails                     function preloadimages arr        var loadedimages 0     var postaction function         var arr  typeof arr   object     arr    arr      function imageloadpost                 loadedimages            if  loadedimages  arr length                        postaction ThumbnailImageArray     call postaction and pass in newimages array as parameter                       for  var i 0  i lt arr length  i                  ThumbnailImageArray i  new Image            ThumbnailImageArray i  src arr i           ThumbnailImageArray i  onload function    imageloadpost              ThumbnailImageArray i  onerror function    imageloadpost                  return blank object with done   method           remember user defined callback functions to be called when images load     return    done function f   postaction f    postaction

User · Answer

Image onload   will often work     To use it  you ll need to be sure to bind the event handler before you set the src attribute   Related Links    Mozilla on Image onload     Example Usage    x000D   x000D      window onload   function      x000D   x000D          var logo   document getElementById  sologo    x000D   x000D          logo onload   function      x000D              alert   The image has loaded       x000D             x000D   x000D          setTimeout function    x000D              logo src    https   edmullen net test rc jpg            x000D             5000   x000D         x000D    lt html gt  x000D       lt head gt  x000D       lt title gt Image onload   lt  title gt  x000D       lt  head gt  x000D       lt body gt  x000D   x000D       lt img src     alt  This image is going to load  id  sologo   gt  x000D   x000D       lt script type  text javascript  gt  x000D   x000D       lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

Life is too short for jquery    x000D   x000D  function waitForImageToLoad imageElement   x000D    return new Promise resolve  gt  imageElement onload   resolve   x000D    x000D   x000D  var myImage   document getElementById  myImage    x000D  var newImageSrc    https   pmchollywoodlife files wordpress com 2011 12 justin-bieber-bio-photo1 jpg w 620  x000D   x000D  myImage src   newImageSrc  x000D  waitForImageToLoad myImage  then     gt   x000D       Image have loaded  x000D    console log  Loaded lol   x000D      x000D   lt img id  myImage  src    gt  x000D   x000D   x000D

User · Answer

complete   callback  This is a standards compliant method without extra dependencies  and waits no longer than necessary   var img   document querySelector  img    function loaded       alert  loaded      if  img complete      loaded     else     img addEventListener  load   loaded    img addEventListener  error   function           alert  error            Source  http   www html5rocks com en tutorials es6 promises

User · Answer

You can use the  complete property of the Javascript image class   I have an application where I store a number of Image objects in an array  that will be dynamically added to the screen  and as they re loading I write updates to another div on the page   Here s a code snippet   var gAllImages        function makeThumbDivs thumbnailsBegin  thumbnailsEnd        gAllImages            for  var i   thumbnailsBegin  i  lt  thumbnailsEnd  i                   var theImage   new Image            theImage src    thumbs     getFilename globals gAllPageGUIDs i            gAllImages push theImage            setTimeout  checkForAllImagesLoaded     5           window status  Creating thumbnail    i 1    of     thumbnailsEnd              make a new div containing that image         makeASingleThumbDiv globals gAllPageGUIDs i             function checkForAllImagesLoaded         for  var i   0  i  lt  gAllImages length  i              if   gAllImages i  complete                var percentage   i   100 0    gAllImages length               percentage   percentage toFixed 0  toString                        userMessagesController setMessage  loading        percentage               setTimeout  checkForAllImagesLoaded     20               return                       userMessagesController setMessage globals defaultTitle

User · Answer

You could use the load  -event in jQuery but it won t always fire if the image is loaded from the browser cache  This plugin https   github com peol jquery imgloaded raw master ahpi imgload js can be used to remedy that problem

User · Answer

You can use the  complete property of the Javascript image class   I have an application where I store a number of Image objects in an array  that will be dynamically added to the screen  and as they re loading I write updates to another div on the page   Here s a code snippet   var gAllImages        function makeThumbDivs thumbnailsBegin  thumbnailsEnd        gAllImages            for  var i   thumbnailsBegin  i  lt  thumbnailsEnd  i                   var theImage   new Image            theImage src    thumbs     getFilename globals gAllPageGUIDs i            gAllImages push theImage            setTimeout  checkForAllImagesLoaded     5           window status  Creating thumbnail    i 1    of     thumbnailsEnd              make a new div containing that image         makeASingleThumbDiv globals gAllPageGUIDs i             function checkForAllImagesLoaded         for  var i   0  i  lt  gAllImages length  i              if   gAllImages i  complete                var percentage   i   100 0    gAllImages length               percentage   percentage toFixed 0  toString                        userMessagesController setMessage  loading        percentage               setTimeout  checkForAllImagesLoaded     20               return                       userMessagesController setMessage globals defaultTitle

User · Answer

Not suitable for 2008 when the question was asked  but these days this works well for me   async function newImageSrc src         Get a reference to the image in whatever way suits    let image   document getElementById  image-id          Update the source    img src   src        Wait for it to load    await new Promise  resolve    gt    image onload   resolve            Done    console log  image loaded  do something

User · Answer

If you are using React js  you could do this   render                 lt img  onLoad       gt  this onImgLoad   item     onError       gt  this onImgLoad   item      src  item src  key  item key  ref  item key    gt                  Where  - onLoad       now will called with something like this    src   https         png   key  1    you can use this as  key  to know which images is loaded correctly and which not  - onError      it is the same but for errors  - the object  item  is something like this   key       src        you can use to store the images  URL and key in order to use in a list of images

User · Answer

If the goal is to style the img after browser has rendered image  you should   const img   new Image    img src    path to img jpg    img decode   then      gt       set styles       add img to DOM           because the browser first loads the compressed version of image  then decodes it  finally paints it  since there is no event for paint you should run your logic after browser has decoded the img tag

User · Answer

Image onload   will often work     To use it  you ll need to be sure to bind the event handler before you set the src attribute   Related Links    Mozilla on Image onload     Example Usage    x000D   x000D      window onload   function      x000D   x000D          var logo   document getElementById  sologo    x000D   x000D          logo onload   function      x000D              alert   The image has loaded       x000D             x000D   x000D          setTimeout function    x000D              logo src    https   edmullen net test rc jpg            x000D             5000   x000D         x000D    lt html gt  x000D       lt head gt  x000D       lt title gt Image onload   lt  title gt  x000D       lt  head gt  x000D       lt body gt  x000D   x000D       lt img src     alt  This image is going to load  id  sologo   gt  x000D   x000D       lt script type  text javascript  gt  x000D   x000D       lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

Here is jQuery equivalent   var  img      img     if   img length  gt  0  amp  amp    img get 0  complete        img on  load   triggerAction      function triggerAction        alert  img has been loaded

User · Answer

You could use the load  -event in jQuery but it won t always fire if the image is loaded from the browser cache  This plugin https   github com peol jquery imgloaded raw master ahpi imgload js can be used to remedy that problem

User · Answer

complete   callback  This is a standards compliant method without extra dependencies  and waits no longer than necessary   var img   document querySelector  img    function loaded       alert  loaded      if  img complete      loaded     else     img addEventListener  load   loaded    img addEventListener  error   function           alert  error            Source  http   www html5rocks com en tutorials es6 promises

User · Answer

Not suitable for 2008 when the question was asked  but these days this works well for me   async function newImageSrc src         Get a reference to the image in whatever way suits    let image   document getElementById  image-id          Update the source    img src   src        Wait for it to load    await new Promise  resolve    gt    image onload   resolve            Done    console log  image loaded  do something

User · Answer

Here is jQuery equivalent   var  img      img     if   img length  gt  0  amp  amp    img get 0  complete        img on  load   triggerAction      function triggerAction        alert  img has been loaded

User · Answer

Life is too short for jquery    x000D   x000D  function waitForImageToLoad imageElement   x000D    return new Promise resolve  gt  imageElement onload   resolve   x000D    x000D   x000D  var myImage   document getElementById  myImage    x000D  var newImageSrc    https   pmchollywoodlife files wordpress com 2011 12 justin-bieber-bio-photo1 jpg w 620  x000D   x000D  myImage src   newImageSrc  x000D  waitForImageToLoad myImage  then     gt   x000D       Image have loaded  x000D    console log  Loaded lol   x000D      x000D   lt img id  myImage  src    gt  x000D   x000D   x000D

User · Answer

If the goal is to style the img after browser has rendered image  you should   const img   new Image    img src    path to img jpg    img decode   then      gt       set styles       add img to DOM           because the browser first loads the compressed version of image  then decodes it  finally paints it  since there is no event for paint you should run your logic after browser has decoded the img tag

User · Answer

You can use the  complete property of the Javascript image class   I have an application where I store a number of Image objects in an array  that will be dynamically added to the screen  and as they re loading I write updates to another div on the page   Here s a code snippet   var gAllImages        function makeThumbDivs thumbnailsBegin  thumbnailsEnd        gAllImages            for  var i   thumbnailsBegin  i  lt  thumbnailsEnd  i                   var theImage   new Image            theImage src    thumbs     getFilename globals gAllPageGUIDs i            gAllImages push theImage            setTimeout  checkForAllImagesLoaded     5           window status  Creating thumbnail    i 1    of     thumbnailsEnd              make a new div containing that image         makeASingleThumbDiv globals gAllPageGUIDs i             function checkForAllImagesLoaded         for  var i   0  i  lt  gAllImages length  i              if   gAllImages i  complete                var percentage   i   100 0    gAllImages length               percentage   percentage toFixed 0  toString                        userMessagesController setMessage  loading        percentage               setTimeout  checkForAllImagesLoaded     20               return                       userMessagesController setMessage globals defaultTitle

[javascript] How to create a JavaScript callback for knowing when an image is loaded?

Examples related to javascript

Examples related to image

Examples related to callback

Examples related to loading