Page: DOMContentLoaded, load, beforeunload, unload

• Browser: Document, Events, Interfaces
• Document and resource loading

Page: DOMContentLoaded, load, beforeunload, unload

The lifecycle of an HTML page has three important events:

• DOMContentLoaded – the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may not yet have loaded.
• load – not only HTML is loaded, but also all the external resources: images, styles etc.
• beforeunload/unload – the user is leaving the page.

Each event may be useful:

• DOMContentLoaded event – DOM is ready, so the handler can lookup DOM nodes, initialize the interface.
• load event – external resources are loaded, so styles are applied, image sizes are known etc.
• beforeunload event – the user is leaving: we can check if the user saved the changes and ask them whether they really want to leave.
• unload – the user almost left, but we still can initiate some operations, such as sending out statistics.

Let’s explore the details of these events.