Start JQuery Function After Font-Awesome Loads

Question

I'm creating a navigation menu based on: https://css-tricks.com/jquery-magicline-navigation/

Everything works fine except for the line width and position for the active item. Basically the width and position of the magic line is smaller than that of the active item.

I tried some fixes and concluded this is being caused by font-awesome icons because they take a couple of milliseconds to load in so it is causing the magic line to take the width without the icon loaded. I tried using on window.load and it works fine, my problem is that the page might contain lots of images so I don't want the user to wait for the page to fully load before seeing the animation.

My question is this: Is there a way to start the function after the font-awesome icons & google fonts are fully loaded and rendered?

mgunduz · Answer 1 · 2016-04-29T21:25:03.160

-3

did you try $(window).load?

  $(window).load(function() {
      //your functions
});

edited Apr 29 '16 at 21:25

answered Apr 29 '16 at 15:16

mgunduz

28
8

1

The OP says they used `window.load` in their question. – Heretic Monkey Apr 29 '16 at 21:28
window.load works but I need something else because waiting for the whole page to load is not an option. – Ralph Najm May 04 '16 at 16:00
i found this: http://stackoverflow.com/questions/4383226/using-jquery-to-know-when-font-face-fonts-are-loaded – mgunduz May 05 '16 at 01:39

Start JQuery Function After Font-Awesome Loads

1 Answers1