When window.onload Triggers With Lazy Loaded Images

Reviewing another developers code with a call window.onload got me thinking… how is that different from jQuery $(document).ready() or even the requireJs domReady functions.

Our good friend Google directed me to a Stack Overflow post where Alireza commented:

window.onload checks everything including DOM elements and images loaded


Recently loading="lazy" was added to the site. This lets the browser decide which images to load based on what part of the page the visitor has on the screen. This provides a nice improvement to the Google Pagespeed Insights and of course the user experience in that the page loads quicker and thus is usable more quickly.

But that got me thinking (again)… will window.onload trigger if the browser is waiting for a lazy loaded image to be triggered to load? You would think it would trigger as expected once the “required” images are loaded, but I hate going off my gut feeling (like thinking that Safari – the leading browser on mobile devices developed by a company that foraged the path for internet connected mobile devices – would respect loading="lazy" but doesn’t at the time of writing this…) So I wanted a way to confirm/deny my theory. (Google wasn’t helping me to find the answer I wanted)

window.onload with lazy loaded images

Testing Logic

To test this, I created a simple page that logs when the window.onload and image load events are triggered.

Here is the Javascript block used to log those.

window.onload and loading=”lazy” Test Results

The window.onload event IS fired after the required image elements are loaded. By required I mean that if the browser decides it only needs to load the first image since it’s “above the fold”, the window.onload event will be fired after that image is loaded and it will NOT wait for the lazy loaded images to load first. Depending on the screen size, browser, etc. the browser may decide to load the lazy loaded images on the initial page load. In that case it will fire the window.onload event after those are loaded.

To summarize, I would say that the window.onload event is fired at a sane time – after the required elements are loaded and NOT after all the elements are loaded even though they are told to not load yet.

Operating SystemBrowserDoes window.onload Fire BEFORE all lazy loaded images are loaded?
Windows 10Chrome 96.0.4664.110Yes
Windows 10Firefox 95.0.2 (64-bit)Yes
Windows 10Edge 97.0.1072.55Yes
macOX MontereySafari 15.1No – doesn’t use lazy loading, so fires window.onload after all images are loaded

Test For Yourself

The test script used for this test is available for review here. Feel free to test in any browser needed to see how it performs.

NOTE: On larger screens a browser might load the lower images in the initial load. For that reason, it may be helpful to make the window a bit “smaller” while testing.