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

To delay the page load or load a specific sub-page dynamically with JavaScript in Webflow, you'll need to use custom JavaScript embedded in the Webflow Custom Code area or inside an Embed element.

Here’s how to do it securely and effectively:

1. Define Your Goal More Precisely

• Delay page load: Do you want to show a loader before showing the content?
• Load a sub-page: Are you trying to dynamically fetch external content (like an AJAX-based interaction) or redirect after delay?

Select based on your use case, as the approach differs.

2. Add a Delay Before Showing Page Content

If you want to delay the visibility of the page (e.g., simulate a transition), you can:

• Wrap your entire Webflow site in a DIV with a class like page-wrapper.
• Apply display: none; or opacity: 0; to this in the Page Settings > Custom Code > Inside Head tag using inline CSS.

Example:

• <style>.page-wrapper { opacity: 0; transition: opacity 0.5s ease-in; }</style>

• Then, in Page Settings > Footer code, add:

On page load, use JavaScript to delay and then reveal the page:

• <script>window.addEventListener('load', function() { setTimeout(function() { document.querySelector('.page-wrapper').style.opacity = 1; }, 1000); });</script>

This applies a simple 1-second delay before showing content.

3. Load a Sub-Page Dynamically (without Redirect)

If you want to load a sub-page’s content into the current page (like via AJAX):

• Place a DIV block where the sub-page content should load, and give it a unique ID, e.g., #content-area.

• Add this to the Footer Code in Page Settings or inside an HTML Embed element:

<script>window.addEventListener('load', function() {  setTimeout(function() {    fetch('/sub-page-link')   // Example: '/about'      .then(response => response.text())      .then(html => {        const parser = new DOMParser();        const doc = parser.parseFromString(html, 'text/html');        const content = doc.querySelector('.main-content'); // Replace with your actual class or ID        if (content) {          document.querySelector('#content-area').innerHTML = content.innerHTML;        }      });  }, 1000); // Delay in milliseconds});</script>

• Replace '/sub-page-link' with your target URL (e.g., /about) and ensure that '.main-content' targets the content container you want to extract from the sub-page.

4. Optional: Redirect to a Sub-Page After Delay

If instead you're trying to delay and then send users to another page:

• Add this to Footer code or an Embed element:

<script>setTimeout(function() { window.location.href = '/your-sub-page'; }, 1500);</script>

This adds a 1.5-second delay before redirecting to /your-sub-page.

Summary

To delay the page load and/or load a sub-page in Webflow, use custom JavaScript via the Footer or Embed elements. You can either:

• Delay content visibility using a wrapper and timeout.
• Load part of a sub-page via fetch() and insert it into a div.
• Redirect users to another page after a delay.

Choose the method based on whether your goal is animation, dynamic content loading, or navigation.