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

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.