Question

26

How to detect if DOMContentLoaded was fired

rated 0 times [ 33] [ 7] / answers: 1 / hits: 42361 / 13 Years ago, sun, february 26, 2012, 12:00:00

I'm trying to help developing a library and for it I'm trying to work with page loading.

In the process I want to make the library completely compatible with the use of defer and async.

What I want is simple:

How can I know that DOMContentLoaded was fired by the time the file is executed?

Why is this so difficult?

In IE, document.readyState show interactive before DOMContentLoaded.

I won't use browser detection in any way, it's against the policy of me and the rest of the participants.

What's the correct alternative?

Edit:

Seems like I wasn't clear enough. I'm not interested to know if the load event has already occurred!!! I already knew how to solve that problem! I want to know how to solve with DOMContentLoaded!!!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tomas

Add To Favorites

Follow

Total Points: 165

Total Questions: 111

Total Answers: 103

Location: Maldives

Member since Tue, Dec 21, 2021

2 Years ago

tomas questions

1 Restore scroll position when navigating with React Router 6

Thu, Jan 27, 22, 00:00, 2 Years ago

1 Chart.js remove gridline

Mon, May 10, 21, 00:00, 3 Years ago

1 Axios Error 401 (Unauthorized) Error when trying to fetch api

Thu, Mar 4, 21, 00:00, 3 Years ago

1 How do I wait for this animation to finish before moving on to the next one?

Mon, Feb 22, 21, 00:00, 3 Years ago

1 How to set html input tag width fit-content in css

Tue, Jan 5, 21, 00:00, 3 Years ago

View All

answered 13 Years ago elishaannac · Accepted Answer

For seeing if all resources in the page have been loaded:

if (document.readyState === complete || document.readyState === loaded) {

     // document is already ready to go

}

This has been supported in IE and webkit for a long time. It was added to Firefox in 3.6. Here's the spec. loaded is for older Safari browsers.

If you want to know when the page has been loaded and parsed, but all subresources have not yet been loaded (which is more akin to DOMContentLoaded), you can add the interactive value:

if (document.readyState === complete 

     || document.readyState === loaded 

     || document.readyState === interactive) {

     // document has at least been parsed

}

Beyond this, if you really just want to know when DOMContentLoaded has fired, then you'll have to install an event handler for that (before it fires) and set a flag when it fires.

This MDN documentation is also a really good read about understanding more about the DOM states.