1

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!

Sam W
  • 85
  • 2
  • 11
  • 4
    This code would need to be placed immediately after the #Container element to be effective, however, it may not completely get rid of the FOUC. the only ways to 100% get rid of it is to either pre-style the elements (add classes directly rather than with js) or to hide them with inline css. – Kevin B Mar 12 '14 at 18:18
  • What browser do you see this in? I thought this was pretty much relegated to ancient versions of IE and that as long as your CSS links are where they should be (in the `head`) then this isn't an issue in today's browsers. (Actually, I'd argue it was never an issue...it's just how they worked) – DA. Mar 12 '14 at 18:20
  • Regardless of how new your OS/Browser is, a slow PC still often gets a FOUC. – Kevin B Mar 12 '14 at 18:22
  • @KevinB true, though I'd then say that's just an argument for not worrying about it. It's just how some browsers work. – DA. Mar 12 '14 at 18:22
  • Agreed. I typically don't worry about it, and if the client has an issue with it, add a loading gif, though i haven't had to do that in years. – Kevin B Mar 12 '14 at 18:23
  • Ah ok, I might try and add in the class directly on the #Container div and see how that works. Thanks! – Sam W Mar 12 '14 at 18:25
  • @DA it is in Chrome & IE that I have seen this. – Sam W Mar 12 '14 at 18:31
  • @Kevin B I think if I pre-style the elements it loses its SEO friendliness. – Sam W Mar 12 '14 at 18:32
  • 1
    That depends on what pre-style you are adding. What exactly is causing the FOUC? are you adding classes to the html with javascript? are images not loading fast enough? – Kevin B Mar 12 '14 at 18:33

1 Answers1

2

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.

SomeKittens
  • 38,868
  • 19
  • 114
  • 143
  • One of the issues is that I am using the [anythingslider.js](https://css-tricks.com/examples/AnythingSlider/demos.html) script, however, it is quite often being rendered like this https://css-tricks.com/examples/AnythingSlider/demos.html when nothing is cached. – Sam W Mar 12 '14 at 18:27
  • That second link above is what I am trying to avoid with this FOUC solution! – Sam W Mar 12 '14 at 18:28
  • 2
    See, that's a js issue. I don't see any seo problems with pre-styling that slider by adding appropriate classes to the images which would cause all but the first one to be hidden. – Kevin B Mar 12 '14 at 18:35
  • 1
    Yea, this isn't really an issue of CSS, but that you have to wait for the JS to do all the styling. That's convenient for you as the developer, but does introduce the FOUC. The prestyling is likely the best option here. – DA. Mar 12 '14 at 18:39
  • That's a great idea @Kevin B. Will give that a go. – Sam W Mar 13 '14 at 09:15
  • Thanks also for your assistance @DA – Sam W Mar 13 '14 at 09:16
  • This doesn't solve the problem of when elements far down a large HTML page are reordered such that they show up at the top. For example, if reordering elements using a flexible box layout, there will still be a flash of "unstyled" content. – Tyler Crompton Sep 23 '15 at 03:21