CODEWITHSUNDEEP
javascripthtmlwebflowasynchronous-javascriptexternal-script
Cormor
Cormor

Reputation: 69

How to execute a script after an external asynchronous script in header tag completes execution?

With Webflow native custom code editor, I added to my website an external script made by Finsweet inside the <head> tag, as they instruct to do.

I want to make some changes in the page with my own script after the execution of Finsweet's one but I'm limited by my knowledge in asynchrous JavaScript and use of JavaScript in HTML code.

Here is what it looks like:

<!-- [Attributes by Finsweet] CMS Slider -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
<script>
  // my own script
</script>

Putting my own script before the closing </body> tag is still not enough to allow the external script to fully execute.

I want a clean solution that avoids using a timer, knowing that I'm also limited by Webflow's environment.

Upvotes: 0

Views: 64

Answers (1)

Anass igli
Anass igli

Reputation: 56

First of all, F'insweet code tags should be placed in your header tag (according to their Docs).

If you want to ensure that your custom script starts executing only after F'insweet's script, you can add the defer attribute to the F'insweet end of script tag as so :

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js" defer ></script>

Hope this helps!

Upvotes: 0

Related Questions