search

iancleary / nuxtjs-contentful-blog

Full Static Site built with NuxtJS, TailwindCSS, Contentful CMS.
https://nuxtjs-contentful-blog.vercel.app/
Other
2 stars 1 forks source link

Font Awesome Blocking #137

Closed iancleary closed 4 years ago

iancleary commented 4 years ago

https://stackoverflow.com/a/47474967

iancleary commented 4 years ago

What you are seeing is known as Flash of Invisible Text (or Flash of Unstyled Contents). This is because the page is rendered before the external font is downloaded. Then, when the icon font is downloaded and ready, the page is repainted.

It is possible - but not recommended(!) - to block the whole page from displaying until the fonts are loaded. You can do this by hiding the while the fonts are loading. Once they are in place, the .fa-events-icons-loading class is removed from the by the font awesome script and everything is painted in the browser window at the same time.

html.fa-events-icons-loading body {
    display: none;
}

You can compare This non-blocking example with this blocking version. The effects are not too visible, but the first one will display the text first, and then get repainted with the icons when they are loaded. The second will hide everything until the icons are loaded.

Edit: You can read more about asynchronous loading over at the Font Awesome Blog