To delay the page load and load a sub page in Webflow using JavaScript, you can utilize the `window.onload` event and the `setTimeout` function. Here's an example of how you can achieve this:
Step 1: First, you need to create your JavaScript function that loads the sub page. Let's call it `loadPage()`.
```javascript
function loadPage() {
// Add your code here to load the sub page
window.location.href = "your-sub-page-url";
}
```
Step 2: Next, you need to add an event listener to the `window.onload` event in order to delay the page load. Inside this event listener, you can use the `setTimeout` function to delay the execution of the `loadPage()` function.
```javascript
window.onload = function() {
setTimeout(loadPage, 5000); // Delay of 5 seconds (5000 milliseconds)
}
```
In the example above, the `setTimeout` function waits for 5 seconds (5000 milliseconds) before calling the `loadPage()` function, effectively delaying the page load. You can adjust the delay time by changing the number (in milliseconds) passed to the `setTimeout` function.
Step 3: Lastly, you need to include this JavaScript code within your Webflow project. You can do this by adding an Embed element to your page.
To add an Embed element in Webflow, follow these steps:
1. Select the desired element or section where you want to add the JavaScript code.
2. Click the "+" button to add a new element.
3. Search for "Embed" in the elements panel and select the Embed element.
4. Double-click the Embed element to open its settings.
5. Paste the JavaScript code snippet mentioned above into the "Custom Code" section of the Embed settings.
That's it! When the page loads, it will be delayed by the specified time, and then the `loadPage()` function will be executed, redirecting the page to the specified sub page.
Remember to replace "your-sub-page-url" with the actual URL of the sub page you want to load. And make sure to test this functionality thoroughly to ensure it fits your needs and performs as expected.