<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" />

Super sites are a single page app - which means pages load faster and the overall site performance is high. As a consequence the page content is loaded dynamically and triggers like DOMContentLoaded do not fire when you need them to. Eg the Load may fire before the page content you are targeting has actually been dynamically loaded on the page. Or will not fire when the page changes though navigation. This script can handle both situations reliably.

</aside>

What is the Generic Load Script?

The Generic Load Script is a mechanism that ensures any custom script or function you want to run on your Super site is executed at the right time—even when the page content hasn’t fully loaded or when the user navigates around the site. Because Super is built as a Single Page Application, it behaves differently than traditional static websites where scripts typically wait for the DOM to load before firing.

Why is it needed?

1. Traditional “page load” events don’t always work

   On a regular static site, you can rely on events like DOMContentLoaded or window.onload to detect when the page has finished loading before running your scripts. However, in a Single Page Application, those events are triggered only once (when you first land on the site), and don’t necessarily fire again during in-page navigation. That means some scripts might run too early or not at all, leading to unexpected behavior.

2. Ensures scripts run on navigation

   Because Super is a Single Page Application, users can navigate across sections without performing a full page refresh. In these cases, a traditional “load” event is never triggered. If you rely on that event to run your custom script, it won’t fire on subsequent navigations. The Generic Load Script provides a reliable hook that triggers your code whenever necessary, even on in-page transitions.

3. Avoids timing issues

   Sometimes, scripts need access to page elements that haven’t fully rendered yet. If your script fires too early, it might not find the elements it’s supposed to manipulate. The Generic Load Script can be configured to run at just the right moment, once the content is available, so it operates correctly every time.

How does it work?

1. Watches for navigation events

   Instead of relying on a traditional DOMContentLoaded or window.onload, the Generic Load Script “listens” for navigation events specific to Single Page Applications. When a user moves from one page or section to another, the script knows to re-fire your custom code or initialize new functionalities.

2. Calls your custom scripts/functions

   Once the Generic Load Script detects that the user has navigated—or that certain parts of the page have been rendered—it calls any scripts or functions you’ve registered. It’s essentially a reliable dispatcher that ensures everything happens at the correct time.

3. Prevents duplicate triggers

   The script can be designed to prevent multiple triggers in rapid succession. That means if your site transitions through pages quickly, your scripts won’t accidentally fire multiple times and cause performance issues or errors.

Why is it important?

• Reliability: It guarantees that your custom code is always run when the page is ready, no matter how users move around your site.
• Better User Experience: By ensuring scripts load properly on every page view or section view, you avoid broken widgets, missing analytics, or other functionality issues.
• Consistent Performance: Handling load events at the right moment helps your site stay fast, stable, and consistent, preventing race conditions where parts of the page aren’t ready yet.

Script

<script>
(function() {

    // Define you functions here

    const runFunctions = () => {
        // console.log("Running functions to set up navigation.");
        callYourFunctions(); // Replace this with your functions as required
        // console.log("RunFunctions completed.");
    };

    const initializeRouteChangeHandler = () => {
        if (window.events && window.events.on) {
            window.events.on('routeChangeComplete', runFunctions);
        } else {
            // console.warn('Event system not available: window.events.on is undefined.');
            window.addEventListener('popstate', runFunctions); // Fallback for route changes
        }
    };

    const initialSetup = () => {
        // console.log("Initial setup started.");

        runFunctions(); // Handle initial load
        initializeRouteChangeHandler(); // Set up route change handling
        // console.log("Initial setup completed.");
    };

    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        // console.log("Document is ready or interactive. Running initial setup.");
        setTimeout(initialSetup, 50); // Delay initial setup to ensure readiness
    } else {
        // console.log("Waiting for document to be fully loaded.");
        document.addEventListener('DOMContentLoaded', initialSetup); // Perform setup after DOM is fully loaded
    }
})();
</script>

How to Use the Generic Load Script in Your Super Site

Follow these simple steps to reliably run custom scripts on your Super site, even with in-page navigation and content loading delays: