Finsweet scripts loading late with per page JS

[uebersaxsamuel]

Description

When I enable the per page JS in webflow. some scripts do load too late.
e.g. the slider dots script.

How do you guys load your legacy scripts with JS per page enabled?

[Support-Luis]

Hey @uebersaxsamuel!

This is the first time I encouter this issue. Could you share a link so I can take a look?

[uebersaxsamuel]

Hey @Support-Luis

staging link with per page JS disabled: Staging
After enabling it. The filters do not get rendered in the correct place anymore.

with per-page JS

without per-page JS:

[uebersaxsamuel]

@Support-Luis @Support-Pedro I tried moving the script to the header. did not solve the issue.

[Support-Luis]

Hey @uebersaxsamuel!

Apologies for the delay.

According to Webflow:

Important
If your site uses custom JavaScript code or a shared Library enabling asynchronous JavaScript loading may prevent scripts and Library elements from working as expected. This happens when JavaScript that your custom code or shared Library elements depend on hasn’t been fully loaded by the browser.

Webflow also suggest the following ways to fix it.

Depending on your specific custom code, there are two main ways to delay its execution and ensure it works when asynchronously loading JavaScript:

• External JavaScript — add the defer attribute to <script> tags with a src attribute to delay execution until the HTML is fully parsed.
• Inline JavaScript — wrap inline JavaScript in a window load event handler to ensure execution only happens after all resources are loaded.

Since we do have the defer tag, we can try using the second option with this snippet

<script>
  window.onload = function () {
    console.log('Window has loaded!');

    const src = 'https://cdn.jsdelivr.net/npm/@finsweet/attributes-sliderdots@1/sliderdots.js';
    let e = document.querySelector(`script[src='src']`);
    if (!e) {
      e = document.createElement('script');
      e.async = true;
      e.src = src;
      document.head.append(e);
    }
  };
</script>

This will wait until the window has loaded to append the Attributes script to the head of the page, ensuring the script loads correctly.

Could you give it a try and let me know how it goes?

[uebersaxsamuel]

@Support-Luis

<script>
  window.onload = function () {
    console.log('Window has loaded!');

    const src = 'https://cdn.jsdelivr.net/npm/@finsweet/attributes-sliderdots@1/sliderdots.js';
    let e = document.querySelector(`script[src='src']`);
    if (!e) {
      e = document.createElement('script');
      e.async = true;
      e.src = src;
      document.head.append(e);
    }
  };
</script>

Amazing, this approach works. thank you.