0

I am looking for a way to run code after all images on the page are loaded and rendered (not half-way but fully).

I found that window's load event should be a cross-browser event for when all of the content is loaded and parsed on the page, but I experience a problem where Safari on desktop and on mobile fire it too early (almost at the same time as the DOMContentLoaded document event) when the images are not cached, but work as expected when they are already cached.

Is there a cross-browser way to ensure all the images on the page are loaded and rendered and then run some code?

I am also thinking about this comment about onload window event suggesting that:

In some browsers it now takes over the role of document.onload and fires when the DOM is ready as well.

I am not sure, if it is relevant, but I also found this caveat on the JQuery load event of images on the documentation here:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache
Max Semikin
  • 974
  • 1
  • 11
  • 19
  • 1
    @T.J.Crowder OK, thanks for your help anyway! – Max Semikin Jul 13 '17 at 13:50
  • Recommend removing the irrelevant thing from the jQuery docs about the `img` `load` event. – T.J. Crowder Jul 13 '17 at 13:56
  • @T.J.Crowder Thanks, mentioned that it may not be relevant – Max Semikin Jul 13 '17 at 13:58
  • FWIW, I don't think there is any such event (but I can't say for sure). I would be surprised if responding to `window`'s `load` event with `setTimeout(function() { /* Do the work here */ }, 100);` didn't do the job, though, unless the page is **really** complex... :-) – T.J. Crowder Jul 13 '17 at 14:06

0 Answers0