Animation not waiting for load to finish before firing

Hi there,

I’m loading in a script for Font Awesome to display the down arrow and want to wait for this to be loaded before the class is applied to animate the elements. I’ve attempted to use addEventListener to apply the class “initialfade” once everything has loaded but it doesn’t appear to wait before firing the animation.

Below is my code so far:

On the example, the dots and text continue to animate regardless of if the down arrow has loaded or not. You may need to do a hard refresh (Ctrl + F5) to see what I mean.

Thanks in advance!

Hi @Shoxt3r, you’re listening to the DOMContentLoaded event which gets dispatched as soon as the markup got loaded, but not necessarily the specified sources; try

window.addEventListener('load', ...)

instead to wait until the page got loaded completely. Another option would be to add a load event listener to the specific link or script element in question.

Thanks! Unfortunately adding

window.addEventListener('load', ...)

doesn’t seem to solve the issue either. Does it make any difference the fact that the script I’m listening out for is external?

No that shouldn’t make any difference… just had a look at that font awesome kit though, it seems that it just includes the actual styles at runtime:

<script src="" crossorigin="anonymous"></script>
<!-- The following styles are getting added by the above script -->
<link rel="stylesheet" href="" media="all">
<link rel="stylesheet" href="" media="all">
<link rel="stylesheet" href="" media="all">

I don’t think there’s a way to wait for these; you’d have to include those styles manually, but then you won’t get the benefits of using the FA kit (such as always loading the latest versions).

PS: I don’t have an FA account myself but you might have a look at the settings for the kit, maybe there’s a way to provide an onload callback or something like that.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.