#How to make sure a specific script will be loaded before anything on the page?

9 messages · Page 1 of 1 (latest)

night mural
#

I have a ScrollReveal script and I wish it is loaded before anything in the DOM. What is the best way to achieve that?
I'm putting the script call at BaseHead.astro component, but it isn't loading before all the rest.

safe warrenBOT
#
No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

mental rampart
#

What does the <script> tag look like? You might need to add is:inline

night mural
#

I tried it, but then it stops working :/

The script call is
<script src="../scripts/scrollreveal.min.js"></script>

The error when I use is:inline before src:
GET http://127.0.0.1:3000/scripts/scrollreveal.min.js net::ERR_ABORTED 404 (Not Found)

Thanks for the response!

mental rampart
#

Is your script located in src or public?

night mural
#

at /src/scripts

mental rampart
#

Try placing it in /public/scripts/scrollreveal.min.js and using a <script> tag like: ```html
<script is:inline src="/scripts/scrollreveal.min.js"></script>

night mural
#

It worked!!! I just needed to remove the ScrollReveal function from the script itself and move it right below the script call. Thank you so much.

Any guess on how to get rid of this error message? The website looks to be working fine, tho I haven't tested after build yet

image.png
mental rampart