Execute function after complete page load

javascript

event-listeners

dom-content-loaded

async-loading

byNikita Barsukov·Dec 16, 2024

Initiate actions when the entire page, including all dependent resources, finish loading using window.onload:

window.onload = () => alert('Page is now fully loaded, party time! 🎉');

Utilizing jQuery, bring into play the $(window).on('load', ...) function:

$(window).on('load', () => alert('This is jQuery speaking, your page is fully loaded!'));

There may be some cases where functions only need to run after the DOM is ready, without waiting for other resources. More efficiency, fewer Latte breaks:

document.addEventListener("DOMContentLoaded", () => {
  // All your DOM are belong to us, ready to modulate them!
});
but remember, the **`DOMContentLoaded`** event might fire before things like images are fully loaded. So, use this mainly for **DOM-specific operations**.

Taming the readystate

Understanding the document's readyState is like knowing the status of your pizza delivery:

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    // Delivery is here! Pizza (or your page) is fully loaded. 🍕
  }
});

This scenario ensures your function (or pizza party) starts right after the delivery (the entire page) is fully loaded.

Unleashing advanced techniques beyond onload

An eye on dynamic changes with MutationObserver

If the page can't sit still and loves to load content asynchronously, MutationObservers help you react:

const observer = new MutationObserver(mutations => {
  // Change is constant—time to do your stuff whenever DOM changes.
});
observer.observe(document, { childList: true, subtree: true });

Keep an eye on specific elements

Wait for a specific element, such as an image or a video, to load before triggering your function:

var img = document.querySelector('img');
img.addEventListener('load', () => {
  // Image loaded! It's like turning on the light in a dark room.
});

Fascinations with loading strategies

The reign of `window.onload`

window.onload is your guy when you need all the assets on the resume — sorry, meant page — like images, CSS, JS, or other resources.

Advantages of `DOMContentLoaded`

Conjure DOMContentLoaded when you only care about the DOM and want to start early, just like an eager beaver.

Cracking the code of jQuery's ready

Keep in mind, jQuery’s $(document).ready() triggers when our friend DOM is dressed up, but doesn't wait for slowpokes - images, stylesheets, or iframes.

Jump on 'Interactive' state for quick interactions

There's the 'interactive' state, kind of like that "just one more level" in the game before bed. Scripts can kick off sooner, but less commonly used for full-page load scenarios.

Need-to-knows for specific scenarios

Wrath of slow networks

On slow networks or with large pages, waiting for the 'load' event is like watching paint dry. It's good to notify users with loading indicators or comforting messages like "Good things take time" 👍.

Beware the browser inconsistencies

Different browsers can play the events like different instruments in an orchestra. It's wise to test across browsers, and maybe use tools like Browsersync for automating this.