HTML event which fires after loading, but before page displayed?

george7378 0
Viewed 29

I have a web page with some JavaScript which I'm running via the 'onload' event for the <body> element. The code looks at certain child elements and adjusts all their heights to match the tallest one. This means that the layout always visually shifts a bit after the page is loaded and displayed.

It's fine as it is, but I'm wondering if there's a better event to hook into instead of 'onload' - perhaps one that fires after the page has loaded (so I can access and modify the element heights) but before it is rendered?

layout events javascript html
1 Answers
        if (document.readyState == 'loading') {
            console.log('loading')
        }
        if (document.readyState == 'interactive') {
            console.log('interactive')
        }
        if (document.readyState == 'complete') {
            console.log('complete')
        }
        document.addEventListener("visibilitychange", () => {
            if (document.visibilityState === 'visible') {
                console.log('visible')
            }
        });
        document.addEventListener('DOMContentLoaded', (event) => {
         console.log('DOM fully loaded and parsed');
        });
        document.addEventListener('readystatechange', (event) => {
            if (event.target.readyState === 'interactive') {
                console.log('interactive')
            } else if (event.target.readyState === 'complete') {
                console.log('complete')
            }
        });

you can try any of the states that fits your need also links for more examples

https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event

https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

Manoj Krishna0
Related