Initial animation is laggy, and then runs perfectly

I’ve created a dropdown menu in hype and when you open it for the first time (no matter how long you’ve waited for it to load), it’ll lag slightly. After that it will open and close perfectly.

If you cache refresh (CMD + Shift + R), you can reproduce it almost every time.

Is there a way to fix this?

Also:
Is there a way to keep the navigation bar from refreshing on every page. Right now it disappears for a good second.

In what browser?

Are you preloading your images?

Chrome, but the problem persists with safari and firefox.

I have both ‘Create offline application cache’ ticked and all of the images ticked for preload.

I don’t recommend checking ‘offline application cache’ unless you’re creating an iOS web app that needs offline support.

The stutter you see is happening because the font file used by your menu is not downloaded at the start of your document load. If you open up Chrome’s developer tools, go to the network tab, and watch requests coming through (with cache on or off) you’ll see that http://getrep.me/font/proxima-nova/proximanova-bold-webfont.woff2 is being downloaded when you hover a menu. This is because on load, no text exists on the page which needs the font, so it is not yet downloaded.

When a font appears which uses the face, it is downloaded from your page. To fix this, just put a little hidden piece of text using that font off scene.

2 Likes

Thanks thats exactly right! I’ve sorted it out now.

Is there anyway to keep the nav bar static throughout the website - right now it flashes briefly on page change.