CODEWITHSUNDEEP
javascriptjqueryfouc
Sam W
Sam W

Reputation: 85

SEO-friendly solution to avoid a flash of unstyled content

I am using the following JS to avoid a flash of unstyled content in a SEO-friendly way:

<script type="text/javascript"> 
$('#Container').addClass('fouc'); 
$(document).ready(function() { 
    $('#Container').show(); 
}); 
</script>

Which also has the accompanying CSS: <style> .fouc {display:none;}</style>.

What I am expecting to happen is that on page load, at the very minimum, my div #Container should at the class .fouc added, however, this only occurs if I manually add it via the console.

Do I need some additional code etc in order to get this to function as expected?

FYI, I am already calling JQuery prior to when this script is being called.

Your help is appreciated!

Upvotes: 1

Views: 3070

Answers (1)

SomeKittens
SomeKittens

Reputation: 39512

The best way to avoid a FOUC is to put all of your links to your CSS files in the <head> element. This way the styling rules will load before the content, which will then be styled. This is both SEO and user friendly.

Upvotes: 2

Related Questions