Question

I’m building a website, and I can notice that the more code I add in the JQuery body,

$(document).ready(function($){
   ...
});

the more annoying effects I have for the first second it takes to load the website. I can see all elements unstyled, then moving/being transformed until I reach the researched look and feel a second later.

It only takes a second by now, but I can’t imagine going to production which such display bug at start.

Is anyone of you used to dealing with this effect ? What would you recommend ?

Thanks a lot guys 😉

UPDATE : I am not doing any ugly CSS through JQuery. I just happen to use a few different plugins. The most annoying one is the Jqx menu I am using. I can see the text unstyled before Jquery has finished transforming it.

Answer 1

You can hide the content of the page then show it again after the page has finished loading.

Put this just after the opening body tag:

<script type="text/javascript"> 
    $('body').hide(); 
    $(window).load(function() { $('body').show(); }); 
</script>

Not saying this is the best way to do it but it should prevent the style flicker.