Window and DOM loading

Question

Is it always true that DOMContentLoaded event is fired before window.onload event since most webpages are with images and stylesheets or can it happen the other way? I need to know whether window.onload always happen after the DOMContentLoaded event and what happens if the webpage doesn't have any stylesheets, images, and subframes?

A window is said to be loaded only if DOM has finished loading.

Is this statement true?

Possible duplicate of [Difference between DOMContentLoaded and load events](https://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events) — sleighty, Mar 16 '19 at 08:10
@Bruno Ely: I am not seeking the difference and I read the above question before posting mine. Thanks for your answer. — Gautham Pughazhendhi, Mar 16 '19 at 08:57

trincot · Answer 1 · 2019-03-16T09:08:26.240

The HTML living standard published by WHATWG, specifies the order of actions that happen when the DOM has been parsed. It has 12 steps. Steps 4 and 7 deal with the events you ask about:

4) Queue a task to run the following substeps:

Fire an event named DOMContentLoaded at the Document object, with its bubbles attribute initialized to true.

Enable the client message queue of the ServiceWorkerContainer object whose associated service worker client is the Document object's relevant settings object.

5) Spin the event loop until the set of scripts that will execute as soon as possible and the list of scripts that will execute in order as soon as possible are empty.

6) Spin the event loop until there is nothing that delays the load event in the Document.

7) Queue a task to run the following substeps:

Set the current document readiness to "complete".

Load event: If the Document object's browsing context is non-null, then fire an event named load at the Document object's relevant global object, with legacy target override flag set.

Since queued tasks are guaranteed to run in the order they were queued, the order of these two events is guaranteed.

In fact, the DOMContentedLoaded event will already have been processed by step 5 and 6 ("spin the event loop") before load is added to the queue.

Nice! Will edit my answer soon to link to yours since that’s better than the general assumption I make — sleighty, Mar 16 '19 at 08:59

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Update: see trincot's answer for more a in-depth explanation—in short, it is specified that DOMContentLoaded will always fire before load.

I̶t̶ ̶i̶s̶ ̶n̶e̶i̶t̶h̶e̶r̶ ̶s̶p̶e̶c̶i̶f̶i̶e̶d̶ ̶n̶o̶r̶ ̶g̶u̶a̶r̶a̶n̶t̶e̶e̶d̶ ̶t̶h̶a̶t̶ ̶̶l̶o̶a̶d̶̶ ̶_̶a̶l̶w̶a̶y̶s̶_̶ ̶f̶i̶r̶e̶s̶ ̶a̶f̶t̶e̶r̶ ̶̶D̶O̶M̶C̶o̶n̶t̶e̶n̶t̶L̶o̶a̶d̶e̶d̶̶,̶ ̶b̶u̶t̶ ̶i̶t̶ ̶i̶s̶ ̶a̶ ̶f̶a̶i̶r̶ ̶a̶s̶s̶u̶m̶p̶t̶i̶o̶n̶ ̶t̶o̶ ̶m̶a̶k̶e̶. In order to finish loading the whole page, the browser needs to fully load the DOM first—and will p̶r̶o̶b̶a̶b̶l̶y definitely fire DOMContentLoaded before firing load even if there are no resources waiting to be loaded.

From MDN:

The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

A different event, load, should be used only to detect a fully-loaded page.

Window and DOM loading

2 Answers2