How can I call my JavaScript function to delay page load and load a sub page in Webflow?

TL;DR

Add a loader element that hides the main content, then use JavaScript with setTimeout in the page’s body settings to reveal the content after a delay.
To dynamically load a subpage, use fetch() to retrieve and inject HTML into a container, ensuring it’s on the same domain and limited to static content.

To delay page load and optionally load a subpage dynamically, you'll need to correctly integrate JavaScript within Webflow’s limitations while maintaining user experience and performance. Here’s how to do that.

1. Define Your Purpose

If you want to delay initial page content display, use a loader element and hide the page until the delay is complete.
If you want to load a subpage or another section dynamically, you’ll need to use JavaScript to fetch and inject HTML (note: Webflow does not support full dynamic routing natively).

2. Add Your JavaScript Function

Go to your Webflow project, and click Pages > Page Settings (gear icon) of your target page.
Scroll to the Before </body> tag section.
Add your custom script there.

Example delay function:

window.addEventListener("DOMContentLoaded", function () {
  setTimeout(function () {
    document.getElementById("loader").style.display = "none";
    document.getElementById("main-content").style.display = "block";
  }, 2000); // delay in milliseconds
});

Replace "loader" and "main-content" with your actual element IDs or classes.
This function waits for the DOM to load, then delays the visibility switch for 2 seconds.

3. Structure Your Webflow Content

Add a loader div in Webflow (e.g., with ID loader) that covers the entire screen and shows a spinner or animation.
Hide the main content (e.g., #main-content set to display: none in style).
After the delay, your script will remove the loader and show the content.

4. Load a Subpage Dynamically (Advanced Option)

Webflow doesn’t support SPA or Ajax natively, but you can simulate it:

fetch("/subpage.html")
  .then(res => res.text())
  .then(html => {
    document.getElementById("dynamic-container").innerHTML = html;
  });

This fetches another page’s HTML and injects it into a container. This works only if the external page is on the same domain and CORS allows it.
Important: Use this only for static content blocks. Webflow CMS pages can't be loaded this way dynamically.

5. Ensure Lazy Loading and Page Performance

If you delay the page or load content dynamically, ensure all images use loading="lazy" and you defer non-critical JavaScript usage.
For a smooth experience, add CSS transitions or animations to make the loader disappear gracefully.

Summary

To delay page load in Webflow, create a loader element and use JavaScript (with setTimeout) to show your main content after a delay. If loading a subpage, use fetch() to pull in additional HTML and insert it dynamically. Make sure to apply this only where user experience and SEO won’t be negatively affected.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer