css loads late, so html looks weird for a second

Question

I have a common question, I have a webpage done with HTML,CSS and JQuery. When the page starts loading, It first loads the html and displays divs for a second which are supposed to be hidden by css and jquery. But after a second, it looks perfect. But that first second looks terrible. How can I avoid that?

Answer 1

I've not had such an experience but I think the loading procedure for your scripts should help here. Depending on what the page is meant to do (unknown to me), I prefer you try loading this way.

Display the div using CSS

<div style="display: none;">Hidden by default</div>

Load your JQuery files before the closing of your body tag.

When page is fully loaded it can then function well.

Answer 2

$(this).hide(); or $(this).addClass('.hidden'); is always slower than .class { display:none; }

jQuery has to wait for the DOM to load. CSS doesn't. Set your CSS to hide the elements you need to hide on load, then use jQuery to show those element.