Official way to ask jQuery wait for all images to load before executing something

Question

In jQuery when you do this     function        alert  DOM is loaded  but images not necessarily all loaded          It waits for the DOM to load and executes your code  If all the images are not loaded then it still executes the code  This is obviously what we want if we re initializing any DOM stuff such as showing or hiding elements or attaching events   Let s say though that I want some animation and I don t want it running until all the images are loaded  Is there an official way in jQuery to do this   The best way I have is to use  lt body onload  finished    gt   but I don t really want to do that unless I have to   Note  There is a bug in jQuery 1 3 1 in Internet Explorer which actually does wait for all images to load before executing code inside  function        So if you re using that platform you ll get the behavior I m looking for instead of the correct behavior described above

User · Answer

None of the answers so far have given what seems to be the simplest solution       image id   load    function            code here

User · Answer

My solution is similar to molokoloco  Written as jQuery function     fn waitForImages   function  callback        var  img      img   this           totalImg    img length       var waitImgLoad   function              totalImg--          if   totalImg                callback                           img each function              if  this complete                 waitImgLoad                           img load waitImgLoad           error waitImgLoad        example    lt div gt       lt img src  img1 png   gt       lt img src  img2 png   gt   lt  div gt   lt script gt         div   waitForImages function              console log  img loaded             lt  script gt

User · Answer

window  load   will work only the first time the page is loaded  If you are doing dynamic stuff  example  click button  wait for some new images to load   this won t work  To achieve that  you can use my plugin   Demo  Download          Plugin which is applied on a list of img objects and calls     the specified callback function  only when all of them are loaded  or errored        author   H  Yankov  hristo yankov at gmail dot com       version  1 0 0  Feb 22 2010      http   yankov us       function        fn batchImageLoad   function options        var images     this       var originalTotalImagesCount   images size        var totalImagesCount   originalTotalImagesCount      var elementsLoaded   0          Init       fn batchImageLoad defaults             loadingCompleteCallback  null           imageLoadedCallback  null           var opts     extend       fn batchImageLoad defaults  options           Start     images each function                The image has already been loaded  cached          if    this  0  complete                totalImagesCount--              if  opts imageLoadedCallback  opts imageLoadedCallback elementsLoaded  originalTotalImagesCount              The image is loading  so attach the listener           else                 this  load function                     elementsLoaded                     if  opts imageLoadedCallback  opts imageLoadedCallback elementsLoaded  originalTotalImagesCount                       An image has been loaded                 if  elementsLoaded  gt   totalImagesCount                      if  opts loadingCompleteCallback  opts loadingCompleteCallback                                  this  error function                     elementsLoaded                     if  opts imageLoadedCallback  opts imageLoadedCallback elementsLoaded  originalTotalImagesCount                       The image has errored                 if  elementsLoaded  gt   totalImagesCount                      if  opts loadingCompleteCallback  opts loadingCompleteCallback                                              There are no unloaded images     if  totalImagesCount  lt   0          if  opts loadingCompleteCallback  opts loadingCompleteCallback          jQuery

User · Answer

For those who want to be notified of download completion of a single image that gets requested after   window  load fires  you can use the image element s load event   e g       create a dialog box with an embedded image var  dialog       lt div gt  lt img src      img url        gt  lt  div gt         get the image element  as a jQuery object  var  imgElement    dialog find  img        wait for the image to load   imgElement load function         alert  The image has loaded  width       imgElement width      px

User · Answer

I wrote a plugin that can fire callbacks when images have loaded in elements  or fire once per image loaded  It is similar to   window  load function            except it lets you define any selector to check  If you only want to know when all images in  content  for example  have loaded  this is the plugin for you  It also supports loading of images referenced in the CSS  such as background-image  list-style-image  etc  waitForImages jQuery plugin  GitHub repository  Readme  Production source  Development source   Example Usage    selector   waitForImages function         alert  All images are loaded          Example on jsFiddle  More documentation is available on the GitHub page

User · Answer

Use imagesLoaded PACKAGED v3 1 8   6 8 Kb when minimized   It is relatively old  since 2010  but still active project   You can find it on github  https   github com desandro imagesloaded  Their official site  http   imagesloaded desandro com   Why it is better than using      window  load      Because you may want to load images dynamically  like this  jsfiddle      button   click function            image   attr  src

User · Answer

With jQuery i come with this       function         var  img      img            totalImg    img length       var waitImgDone   function             totalImg--          if   totalImg  alert  Images loaded                    img   each function               this               load waitImgDone               error waitImgDone                 Demo   http   jsfiddle net molokoloco NWjDb

User · Answer

With jQuery  you use   document  ready   to execute something when the DOM is loaded and   window  on  quot load quot   handler  to execute something when all other things are loaded as well  such as the images  The difference can be seen in the following complete HTML file  provided you have a lot of jollyrogerNN JPEG files  or other suitable ones    lt html gt         lt head gt               lt script src  quot jquery-1 7 1 js quot  gt  lt  script gt               lt script type  quot text javascript quot  gt                      document  ready function                             alert   quot done quot                                       lt  script gt         lt  head gt  lt body gt              Hello              lt img src  quot jollyroger00 jpg quot  gt               lt img src  quot jollyroger01 jpg quot  gt                   100 copies of this in total              lt img src  quot jollyroger99 jpg quot  gt         lt  body gt   lt  html gt   With that  the alert box appears before the images are loaded  because the DOM is ready at that point  If you then change    document  ready function      into    window  on  quot load quot   function      then the alert box doesn t appear until after the images are loaded  Hence  to wait until the entire page is ready  you could use something like    window  on  quot load quot   function            weave your magic here

User · Answer

This way you can execute an action when all images inside body or any other container  that depends of your selection  are loaded  PURE JQUERY  no pluggins needed   var counter   0  var size      img   length      img   load function        many or just one image w  inside body or any other container     counter    1      counter     size  amp  amp     body   css  background-color     fffaaa       any action    each function       this complete  amp  amp    this  load

User · Answer

I would recommend using imagesLoaded js javascript library    Why not use jQuery s   window  load     As ansered on https   stackoverflow com questions 26927575 why-use-imagesloaded-javascript-library-versus-jquerys-window-load 26929951     It s a matter of scope  imagesLoaded allows you target a set of images  whereas   window  load   targets all assets     including all images  objects   js and  css files  and even iframes  Most likely  imagesLoaded will trigger sooner than   window  load   because it is targeting a smaller set of assets    Other good reasons to use imagesloaded   officially supported by IE8  license  MIT License dependencies  none weight  minified  amp  gzipped    7kb minified  light   download builder  helps to cut weight    no need  already tiny on Github   YES community  amp  contributors   pretty big  4000  members  although only 13 contributors history  amp  contributions   stable as relatively old  since 2010  but still active project   Resources   Project on github  https   github com desandro imagesloaded Official website  http   imagesloaded desandro com  Check if an image is loaded  no errors  in JavaScript https   stackoverflow com questions 26927575 why-use-imagesloaded-javascript-library-versus-jquerys-window-load imagesloaded javascript library  what is the browser  amp  device support

[jquery] Official way to ask jQuery wait for all images to load before executing something

Examples related to jquery