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
Alireza

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)

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.

    <script type="text/javascript">
        var elemEventLog = document.getElementById("events");

        var imagesCount = document.querySelectorAll('img').length;
        var imagesLoaded = 0;

        function imageLoaded( image ) {
            imagesLoaded++;
            addToEventLog( "image " + imagesLoaded + " of " + imagesCount + " loaded: " + image.src + " Lazy Loading Policy: " + image.loading );
        }

        window.onload = function() {
            addToEventLog( "window.onload fired" );
        };

        function addToEventLog( message ) {
            var node = document.createElement("LI");
            node.appendChild( document.createTextNode( message ) );
            elemEventLog.appendChild(node);
        }
    </script>

var elemEventLog = document.getElementById("events");

var imagesCount = document.querySelectorAll('img').length;

var imagesLoaded = 0;

function imageLoaded( image ) {

imagesLoaded++;

addToEventLog( "image " + imagesLoaded + " of " + imagesCount + " loaded: " + image.src + " Lazy Loading Policy: " + image.loading );

}

window.onload = function() {

addToEventLog( "window.onload fired" );

};

function addToEventLog( message ) {

var node = document.createElement("LI");

node.appendChild( document.createTextNode( message ) );

elemEventLog.appendChild(node);

}

</script>

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 System	Browser	Does window.onload Fire BEFORE all lazy loaded images are loaded?
Windows 10	Chrome 96.0.4664.110	Yes
Windows 10	Firefox 95.0.2 (64-bit)	Yes
Windows 10	Edge 97.0.1072.55	Yes
macOX Monterey	Safari 15.1	No – 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.

Test window.onload with loading=”lazy”

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.

Testing Logic

window.onload and loading=”lazy” Test Results

Test For Yourself

Top Related Posts