Load and ready

Resources

Document
- Load and unload events section.

Order of events

Page load start aka “navigation start”.
Document ready.
- ready event.
DOM content loaded.
- DOMContentLoaded event. – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures and stylesheets may not yet have loaded.
Window loaded.
- load event.
- Both HTML and all the external resources: images, styles etc.
Leave the page.
- beforeunload event when starting to leave.
- unload event when the user has nearly left.

Add log message to events

Warning - if you run these lines after the event has already happened, then the log will never happen.

The lines of code are set up here in the order they are expected to fire.

Plain JS

document.ready = function () {
  console.log("Document ready")
}

window.addEventListener(
  'DOMContentLoaded',
  function() { console.log("DOM content loaded") }
)

window.onload = function() {
  console.log("Window loaded")
}

Be careful - you’ll override multiple events set up with the assignment approach - adding with addEventListener is better as it appends.

jQuery

// Marked as deprecated by jQuery.
$(document).ready(
  function() {
    "Document ready"
  }
)

$(window).load(
  function() {
    "Window loaded"
  }
)

I think jQuery might be smart enough to append to array of existing ready or load events, but not sure.

DOM content loaded event

Window: DOMContentLoaded event

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.
Document : DOMContentLoaded

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. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

e.g. Using an arrow functions.

window.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');
});

If you need access to this, then use a plain function instead.

window.addEventListener('DOMContentLoaded', function(event) {
  console.log('DOM fully loaded and parsed');
  console.log(event)
  console.log(this)
})

I tried doing that on document and got an error if using this:

Error: Promised response from onMessage listener went out of scope

It looks like window.DOMContentLoaded is not valid but you can add a event listener as above.

Load event

load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
onload

The onload property of the GlobalEventHandlers mixin is an EventHandler that processes load events on a Window, XMLHttpRequest, element, etc.

The load event fires when a given resource has loaded.

TARGET.onload = FUNCTION;

// OR
TARGET.addEventListener('DOMContentLoaded', FUNCTION)

e.g.

window.onload = function() {
  init();
  doSomethingElse();
};

Check DOM ready

Check if DOM is available.

If it loaded already, you can’t wait for DOM content loaded. So just wait 1 millsecond (I don’t know why from the code snippet this is based on) and fire the function.
If it isn’t, then it is still coming, so add a function to the DOM content loaded event.

const READY_STATES = ['complete', 'interactive']

function domReady(fn) {
  if (READY_STATES.includes(document.readyState) {
    setTimeout(fn, 1);
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Ready state change

Rather than a specific state or event, this event fires each time when moving between states.

readystatechange

Fired when the readyState attribute of a document has changed. Also available via the onreadystatechange property.