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.
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.
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.
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="https://kit.fontawesome.com/479ceaf53b.js" crossorigin="anonymous"></script>
<!-- The following styles are getting added by the above script -->
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/v5.10.1/css/free-v4-shims.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/v5.10.1/css/free-v4-font-face.min.css" media="all">
<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/v5.10.1/css/free.min.css" 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.