jQuery event for images loaded

Question

Is it possible to detect when all images are loaded via a jQuery event   Ideally  there should be a     document  idle function         or    document  contentLoaded function         But I can t find such a thing    I thought of attaching an event like this     document  ready function         var imageTotal      img   length      var imageCount   0                 img   load function   if   imageCount    imageTotal  doStuff           But will this break if an image fails to load  It s critically important for the method to be called  and at the right time

User · Answer

For same-origin images  you could use    get  http   www your domain com image jpg   imgLoaded    function imgLoaded        console log this   loaded

User · Answer

If you want to check for not all images  but a specific one  eg  an image that you replaced dynamically after DOM is already complete  you can use this       myImage   attr  src    image jpg   on  load   function         alert  Image Loaded

User · Answer

function CheckImageLoadingState            var counter   0       var length   0        jQuery   siteContent img   each function                   if jQuery this  attr  src   match   gif png jpg jpeg                length                   jQuery   siteContent img   each function                     if jQuery this  attr  src   match   gif png jpg jpeg                           jQuery this  load function                               each function                   if this complete  jQuery this  load                                      jQuery this  load function                        counter               if counter     length                                  function to call when all the images have been loaded               DisplaySiteContent

User · Answer

There s a note on the ahpi imgload js plugin at the moment saying that it is currently broken  and to try this gist instead  https   gist github com 797120 7176db676f1e0e20d7c23933f9fc655c2f120c58

User · Answer

As per this answer  you can use the jQuery load event on the window object instead of the document   jQuery window  load function         console log  page finished loading now           This will be triggered after all content on the page has been loaded  This differs from jQuery document  load      which is triggered after the DOM has finished loading

User · Answer

imagesLoaded  Plugin is way to go  if you need a crossbrowser solution       lt img gt     src   image jpg    imagesLoaded  function   images   proper   broken     if  broken length  gt  0      Error CallBack  console log  Error        else      Load CallBack  console log  Load              If You Just Need a IE WorkAround This Will Do   var img       lt img gt          error  function    console log  error           load  function    console log  load               img attr  src   image jpg

User · Answer

Use of the jQuery     load   as an IMG event handler isn t guaranteed   If the image loads from the cache  some browsers may not fire off the event   In the case of  older   versions of Safari  if you changed the SRC property of an IMG element to the same value  the onload event will NOT fire   It appears that this is recognized in the latest jQuery  1 4 x  - http   api jquery com load-event - to quote      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     There is a plug-in now to recognize this case and IE s  complete  property for IMG element load states  http   github com peol jquery imgloaded raw master ahpi imgload js

User · Answer

Waiting for all images to load    I found the anwser to my problem with jfriend00 here jquery  how to listen to the image loaded event of one container div     and  if  this complete   Waiting for the all thing to load and some possibly in cache     and i have added the  error  event    it s robust across all browsers    function        Wait dom ready     var  img      img       images collection         totalImg    img length          waitImgDone   function                 totalImg--              if   totalImg                    console log  img length   image s  charg  e s                                     img each function             if  this complete  waitImgDone       already here           else   this  load waitImgDone  error waitImgDone      completed                  Demo   http   jsfiddle net molokoloco NWjDb

User · Answer

I created my own script  because I found many plugins to be quite bloated  and I just wanted it to work the way I wanted  Mine checks to see if each image has a height  native image height   I ve combined that with the   window  load   function to get around the issues of caching    I ve code commented it quite heavily  so it should be interesting to look at  even if you don t use it  It works perfectly for me    Without further ado  here it is   imgLoad js script

User · Answer

img photo    load function              parrentDiv   css  height     img photo   height            very simple

User · Answer

You can use my plugin waitForImages to handle this       document  waitForImages function           Loaded        The advantage of this is you can localise it to one ancestor element and it can optionally detect images referenced in the CSS   This is just the tip of the iceberg though  check the documentation for more functionality

User · Answer

maybe this plugin may be useful  http   www farinspace com jquery-image-preload-plugin

User · Answer

Per jQuery s documentation  there are a number of caveats for using the load event with images  As noted in another answer  the ahpi imgload js plugin is broken  but the linked Paul Irish gist is no longer maintained     Per Paul Irish  the canonical plugin for detecting image load complete events is now at   https   github com desandro imagesloaded

User · Answer

window load   function      Its fully supported by all browsers  and it will fire an event when all images are fully loaded   https   developer mozilla org en-US docs Web API GlobalEventHandlers onload

[jquery] jQuery event for images loaded

For same-origin images, you could use:

Examples related to jquery

Examples related to dom