Page briefly appears without formatting before website loads

I've been struggling along with a bug on my personal website. When I load any of the pages, the page briefly displays the contents without any formatting (as seen on the left) before the page fully loads and seemingly applies the formatting (as seen on the right). To try to remedy this, I added a loading screen that waits for the page to fully load using jQuery using $(window).on("load",function()), but the non-formatted content still loads briefly before the loading screen even renders. I'm currently using Bootstrap and my own stylesheet, and I have downloaded and stored Bootstrap as a local stylesheet in an attempt to fix the problem (I think that the unformatted page displays for a shorter amount of time when the stylesheet is being imported locally rather than from the Bootstrap website).

Does anyone know how to fix this or have any advice on why this is happening? I have a hunch that this might have to do with my internet being slow and somehow loading the content of the page before the styling - so maybe I'm making a big deal out of nothing here, but I have no way of substantiating that claim. Also, here is a link to my website (jasondamico.me) for your reference.

Thank you for your time.

Comments

[Yash Dave]

The flash of the content is due to the order in which your content is loaded in by the browser. What I would suggest is having the div with the .container class be hidden by default via in-line styling and the loader be visible by default. Your jQuery snippet can then easily switch them out once you content fully loads!

[jasondamico]

Wonderful, that worked! Thank you so much - great solution.