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

To delay the initial page load and then dynamically load a sub page in Webflow using JavaScript, you'll need to use custom code to control loading behavior and fetch content. Webflow doesn’t natively support dynamic sub-page loading, so you’ll be using JavaScript to simulate this behavior.

1. Add a Page Load Delay

• Use window.onload or DOMContentLoaded to trigger a delay after the main page is ready.
• Add this code in Page Settings > Before tag in the page where you want the delay.

Example:

window.addEventListener('DOMContentLoaded', function () {  setTimeout(function () {    loadSubPageContent(); // Call your custom function after delay  }, 2000); // 2000ms = 2 seconds delay});

2. Create Your JavaScript Function to Load Sub Page

• You can use fetch() to load HTML content from another page in your Webflow site.
• Place a <div id="sub-page-container"></div> element in your main page to inject the sub page content.

Example function:

function loadSubPageContent() {  fetch('/sub-page') // replace with your actual sub-page slug    .then(function (response) {      return response.text();    })    .then(function (html) {      // Extract the part you want if needed      const parser = new DOMParser();      const doc = parser.parseFromString(html, 'text/html');      const subContent = doc.querySelector('#target-section'); // change selector as needed      document.getElementById('sub-page-container').appendChild(subContent);    });}

3. Prepare the Sub Page for Partial Loading

• On the sub page, wrap the content you want to load separately in a unique element like <section id="target-section">...</section>.
• Avoid scripts or interactions that depend on full page load unless re-initialized after injection.

4. Avoid SEO/Indexing Issues

• Be aware that Webflow and search engines won’t see this JavaScript-based loading during crawl.
• If this content is important for SEO, consider integrating it server-side or placing full content directly on pages.

5. Webflow-Specific Note on Custom Code

• Make sure to add your code in the Page Settings > Custom Code, not in Embed elements.
• Ensure jQuery is already loaded if you use any jQuery-specific syntax.

Summary

To delay page load and load a sub page in Webflow, use setTimeout to delay execution, then fetch sub page content via JavaScript and inject it into the DOM. Wrap target content in the sub page with a unique ID for easy selection.