1 Way To Avoid the Flash of Unstyled Content

read 79 comments

This tutorial describes a way to avoid a flash of unstyled content that sometimes occurs when applying styles with JavaScript on page load. The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex. We can see an example of the problem on this test page.

The page is a copy of a previous entry on this blog with over 140 comments—quite a lot of content. Look for the bright yellow background before the page finishes loading. That's the part that is supposed to be hidden from the start — a simple unordered list, <ul id="flash">.

In pages with a more reasonable length, the standard jQuery code would work just fine:

Continue Reading Below
  1. $(document).ready(function() {
  2.   $('#flash').hide();
  3. });

But in this page there is a whole lot of document that has to be ready before anything inside the $(document).ready() function can be executed. Too much, in fact. And putting the <script> tags just inside the closing </body> tag doesn't help either. No, using JavaScript to hide elements like this just won't work unless the scripts are placed in the HTML immediately following the elements they're hiding.

Why Use JavaScript for This, Anyway?

Before we examine how to fix the problem, we might need to answer the question, Why bother? I mean, isn't that what CSS is for? Certainly we could add a rule to our stylesheet, such as #flash {display: none;}, and our problem would be solved.

But the pure CSS solution introduces another problem: the hidden content is completely unavailable to those who have CSS enabled/available but JavaScript disabled/unavailable. These users simply won't be able to view the content. Now, some developers don't have a problem with that, but as a proponent of Progressive Enhancement™, I believe that a user should be able to see content at the very least when visiting a web page (okay, okay, full-scale RIAs could be an exception).

A Simple Solution

Rather than attempt a pure CSS solution or a pure JavaScript solution, why not try a hybrid of the two? Here is how it might look (Important: I'm embedding styles and scripts here for the purpose of demonstration, but linking to separate files instead is recommended):

  1. <html>
  2.   <head>
  3.     <!-- etc. -->
  4.     <style type="text/css">
  5.       .js #flash {display: none;}
  6.     </style>
  7.     <script type="text/javascript" src="/scripts/jquery.js"></script>
  8.     <script type="text/javascript">
  9.       $('html').addClass('js');
  10.       $(document).ready(function() {
  11.         // Stuff to do as soon as the DOM is ready
  12.       });  
  13.     </script>
  14.   </head>
  15.   <body>
  16.     <!-- etc. -->
  17.   </body>
  18. </html>

The first thing to note here is that the CSS is hiding an element with id="flash" only if it is a descendent of an element with class="js". Now, which element can we add a class of "js" to immediately, from within the <head>, and have it be applied before the slightest bit of the body is visible? Why, the <html> element, of course!

Line 9 shows the "js" class being added. And since it's being added with JavaScript, only those users who have JavaScript enabled will have their <ul id="flash"> initially hidden. Take a look at the beautiful invisibility demonstrated here.

Significantly, the .addClass() method is not inside $(document).ready(). If we had put it inside, we'd be back to square one.

If you follow the YUI advice to put scripts at the bottom, we can still make this solution work for you. We just use ye plain olde JavaScript for our one-liner to add the "js" class, keep that one in the <head>, and dump the other scripts down below, like so:

  1. <html>
  2.   <head>
  3.     <!-- etc. -->
  4.     <style type="text/css">
  5.       .js #flash {display: none;}
  6.     </style>
  7.     <script type="text/javascript">
  8.       document.documentElement.className = 'js';
  9.     </script>
  10.   </head>
  11.   <body>
  12.     <!-- etc. -->
  14.     <script type="text/javascript" src="/scripts/jquery.js"></script>
  15.     <script type="text/javascript">
  16.       // Stuff to do as soon as the body finishes loading.
  17.       // No need for $(document).ready() here.
  18.     </script>
  19.   </body>
  20. </html>

Thanks to Brandon Aaron for the tip to use document.documentElement rather than document.getElementsByTagName('html')[0]

This one, demonstrated here, hides <ul id="flash"> as completely and awesomely as the previous one. Simple!

comment feed


  1. Klaus Hartl

    Hi Karl, I use a slightly different approach here: what is used with JavaScript only - add it with JavaScript. Thus I add a style sheet via document.write after all other style sheet references. You can neglect the .js part in the selectors in that case.

    document.write of course may have negative impact on page rendering time but as long as it's only a single one I felt it's ok.

    (And for the purists: The HTML spec doesn't have a class attribute for the html element, so a theoretical super strict browser could ignore it. In practice all browsers seem to support it.)

    PS: Nice new design!

  2. manu

    Just a note: beware of relative links for your examples, because it is broken when users read your articles from feedburner or google reader.

    Anyway thanks for the tip!

  3. Klaus,
    Thanks a lot for the comments. I'm glad you like the design!

    The document.write trick is an interesting idea that, admittedly, I hadn't thought of yet. Sam Collet also mentioned it to me on Twitter today (great minds think alike, I suppose). Having come to JavaScript on the wave of the DOM scripting / Unobtrusive JavaScript revolution, I had in mind that document.write was somehow a poor practice. But, hey, if it works and there are no discernible side effects, why not?

    You're right, of course, about the class attribute not being valid for the html element. I meant to note that in the entry, but forgot. Glad you brought it up. I figured that since it works and the class isn't hardcoded into the HTML, most people would be willing to overlook that.

    Thanks again, Klaus. It's always great to see how you tackle these issues.

  4. manu, I appreciate the warning about relative links. I'll go and fix them up now — although I don't know if that will have any effect on feed readers this time around. Do they incorporate post updates? Either way, thanks for mentioning.

  5. Morgan ARR! Allen

    This is a great tip. I was so impress beyond even what you mentioned I posted a follow on my blog.
    This applications for this go beyond just fixing the flashing problem.

  6. I apologize if I've missed something in the example, but shouldn't document.getElementsByClassName('html')[0].className = 'js';
    instead be document.getElementsByTagName('html')[0].className = 'js'; ?

    You want the html tag, right?

  7. JFSIII, No apology necessary. You're right. Ack! That's what I get for typing this up so late at night. Duly noted and fixed. Thanks!

  8. I've also usually used document.write to spew necessary css rules into the head, but this is an interesting approach and in some way slightly more elegant. I might try it next time i run up against this problem.

  9. manu

    @Karl: Do they incorporate post updates?
    >> Yep :-)

  10. will haven

    I've been using the code below ever since I came across content "flashing" or rendering of the page without my jQuery modifications applied yet. I link to the js file from the head of my document.

    if (document.getElementById) {
    <style type="text/css" media="screen">
    #element1, .element2 {display:none;}

    • This worked perfectly for my wp site, I'm not sure why the above code didn't kick the flash on my fade ins/outs for my content div, but this worked. THANK YOU!

  11. will haven,

    Yeah, just like Klaus mentioned in the first comment. :)

  12. Ty (tzmedia)

    Another CSS method, that works in some cases, say you are loading slides in a div, and know the size required.
    Specify the size of the Div and have it set to overflow:hidden.
    IT seems to work, and should have an image present, without the fading in slides, etc.
    A technique I've been happy with, until now anyways - thanks gang.

  13. jlee

    I've been using the noscript tag to achieve the same effect...



    <style type="text/css">
    #flash { display:none}

    <style type="text/css">
    #flash {display: block}

    Also, doesn't IE7 (or some other browser) not allow for DOM manipulation until the DOM is fully loaded? (or does adding a class name not factor in as a DOM change?)

  14. Klaus Hartl

    By the way, you don't have to necessarily document.write a style tag. You can as well use a link.

  15. Klaus Hartl

    @jlee I like that solution, unfortunately the HTML spec doesn't allow style elements inside noscript. To me this is clearly an oversight. Thus it's allowed in HTML 5 under certain circumstances, but the Spec did quite confuse me here.

  16. Ricardo

    Why not

    $('head').append('<style type="text/css">#fox {display:none}</style>')

    outside ready()?

  17. Ricardo,
    I suppose that would be fine, too. It might get a little messy if you have multiple style rules you want to apply.

  18. Janne H

    Thanks for the tip Karl, this is just what I needed for a website I've been working on!! :D

    Keep up the good work!

  19. Maniquí

    I've been using a similar technique: avoiding flickering in jQuery.

  20. If you put your JS includes at the bottom of the document you can use the document.documentElement reference instead of looking for it using getElementsByTagName.

    Replace this:
    document.getElementsByTagName('html')[0].className = 'js';
    With this:
    document.documentElement.className = 'js';

  21. thanks for the tip, Brandon!

  22. I'm actually using .nojs rather than .js in the html tag. So I'm going against the tide - I hard code .nojs and then remove the class at the earliest possible point.

    There is no difference techincally but in terms of time consideration I could concentrate on the majority of users first then bake in for those that don't have Javascript later.

  23. Ca-Phun Ung, one difference is that the class attribute is not valid on the html element, so if you're concerned at all about your page validating, adding it with JavaScript would be better than removing it with JavaScript.

  24. @karl: Point taken - that never crossed my mind :)

  25. And what about progressive enhancement?

    It is explained in this ALA article

  26. Markus,

    I'm well aware of what progressive enhancement means. That's the whole point of this post. It allows you to initially hide certain elements for those with JavaScript enabled, and those without JavaScript still get to see the content.

  27. I'm sorry, I didn' mean to question whether or not you are aware of progressive enhancement, my real intention was to point the whole article as a solution to the topic of this post, not to teach you what it is progressive enhancement.

    Well, in the post, a guy named Scott Jehl, designer at Filament Group, talks about a technique to test the user's device capabilities and make the enhancement only if the user's device meets some requirements. I think his technique is an interesnting solution to avoid the flash of unstyled content, as the script only loads the "enhanced" stylesheet when the dom is ready.

  28. I'm sorry, too, Markus. I shouldn't have been so defensive. I've read Scott's article and enjoyed it.

  29. To avoid the purists who won't let you put a class on the <HTML> element, you could just put it on the <BODY> element. I use <BODY> class switching a lot; it's like instantly changing stylesheets without the headache of enabling/disabling each one.

    • Hi Daniel,
      Yes, setting (and switching) a body class is a time-honored tradition. Unfortunately, though, it sort of negates the benefit that you get with setting a class on the html element, which is that you can do it with JavaScript before anything in the body is registered/loaded and thus avoid the flash of unstyled content.

      • Daniel Wachsstock

        Putting the <SCRIPT> right after the opening <BODY> would avoid the flash; the element is created as part of the DOM as soon as the opening tag is parsed.

  30. pedram

    That so Interesting KARL ,
    YOU are so prepomnderant in DOM .

  31. Wow, great tip here, I'm definitely going to start using this more!

  32. JP

    Thanks for the inspiration Karl! This article helped fix a FOUC problem we've had for a while now.

  33. Searched a lot to find a solution to hide content fast enough and here we go. Brilliant solution. Thank you very much.

  34. Fantastic, just what I was looking for. Many thanks!

  35. Mark Courtnell

    Great, implemented this and even put a animated loading gif, which disappears once my componets have loaded. BUT this works perfect in IE7, but in Firefox3, it hides the content shows my animated gif, then for a split second i see the hidden content before it bounces into action.
    Where it use to sit there for 3-4 seconds before bouncing into action.
    Karl if you want to see this in action i can email you a website link, its in development didn't want to post it here

  36. one thing that could be a major problem with this technique is that it hides large portions of your HTML with display: none; from your stylesheet instead of with javascript.

    In the past google has mentioned that this is a technique that is used for blackhat SEO purposes and your text either isn't indexed or your page rank suffers (can't remember which)...

    The way I ended up getting the best of both worlds (thanks to a lot of the info above) was to use old fashioned DOM scripting technique to add the jsActive class to the HTML tag, then also use DOM scripting to add a style tag to the head of the document and feed it the divs I need to hide... This way you don't have display: none added with CSS...

    // add class of .jsActive to pages when javascript is available
    document.documentElement.className = 'jsActive';

    // add a style tag to the head of the document and hide some stuff up front before the DOM is ready so there's no flash of content
    var headTag = document.getElementsByTagName('head')[0];
    script = document.createElement('style');
    script.type = 'text/css';
    script.innerHTML = '#JSInd, #home #ShortGrass, .Hide { display: none; }';

    I'm pretty sure this would be enough for google to at least think you have good intentions... Maybe someone who knows more about the SEO angle can chime in, because you could also use javascript to hide key words, so maybe google is savvy to this as well?


    • That's interesting. I hadn't considered the SEO angle. Still, since the elements are only receiving the display:none; with JavaScript enabled, I'm not sure it makes a difference. Another way to handle it is to avoid using display:none altogether. You could set your .js descendant elements that you want hidden to have text-indent: -1000em; or position:relative; left: -1000em; instead.

      • hiding the text by positioning it off screen was my first idea, but it didn't work for me with .show() for some reason.

      • It's a good point that the display: none isn't used unless javascript is active. That might be enough to make it not matter that it's in the stylesheet... Has anyone done any tests using hidden content to see what's indexed and what isn't by chance?

    • if anyone wants to use the method above you'll need to change the part that adds the style tag to the document to this:

      var styleTag = document.createElement("style");
      var text = document.createTextNode("#JSInd, #home #ShortGrass, .Hide { display: none; }");

      I'm not a veteran with DOM Scripting methods, but the other code wasn't working in Chrome, but changing the method from innerHTML to .createTextNode seems to fix the problem

      • great solution!
        Been searching for hiding some dom elements before page loads.
        Otherwise I'd have to forget about animation effects.

  37. Ok, I am going nuts trying to get this to work. Does it matter if the #flash is buried inside other div's? It just doe snot want to co-operate. Using FF 3.5

  38. works in your page no problem. I sent you an email with the login.

  39. Karl, this is great. Forgive the noob question, but what actually goes in place of " // Stuff to do as soon as the DOM is ready" ? I can get it to hide but not reappear at my site. Thanks!

    • Hi Nathan,

      Maybe a different example would help. Let's say you have a utility CSS class called "js-hide" that you want to add to all elements that should be hidden when the page loads. You could do that like so:

      <script type="text/javascript">
        document.documentElement.className = 'js';
      <style type="text/css">
        .js .js-hide { display: none; }

      Then, you might have an element in your html like this (with two classes, "js-hide" and "something"):

      <div class="js-hide something">this is initially hidden</div>

      You can show that div later on, based on some user input or some amount of elapsed time or whatever. For example, you could toggle its visibility in response to a user clicking on a button:

      <script type="text/javascript">
        $(document).ready(function() {
          $('#my-button').click(function() {

      I hope that helps!

  40. to add part of html, then it is possible so:


  41. Thanks for this example, it solved a problem I'd been struggling with for a while. Very happy with the solution!

  42. Brilliant. Thanks for posting.


  43. Josh

    Hi Karl, let's say a page has a JavaScript statement in the HEAD that is used to add a class named "js" to the HTML element. This js class is used to write CSS that hides elements that will later be displayed using jQuery (e.g., an accordion). Won't these hidden elements remain hidden in browsers that support JavaScript but are not supported by jQuery? If so, should the code below be loaded after the jQuery library is loaded?

    document.documentElement.className.replace(/\bjs\b/, '');

    Is this beneficial? Is there any downside to using this code?


  44. Carlos

    Hi Karl, thanks for this post, I have follwed every single recomendation of your post but I have a slide gallery inside the div I´m hidding and showing and after the toggle effect the gallery dissapear. Please check the page http://www.inversioneslacastellana.com/qsomos.php

    there is a slide gallery at div="slide2" and is not showing anything.

    What can I do in this case.

    Thank you very much.

  45. quochoa

    It should be "visibility: hidden" instead of "display:none" to make sure functions in $(document).ready works well.

  46. This is just to simple and awesome! Thanks so much.

    Why use an ID for "flash" though, since you will probably be using more than one of them per page. I used classes instead:

    .js .flash

    Awesome, though.

  47. Easiest fix that worked for me.

    overflow: hidden;


    • turtle

      Your solution made me feel stupid.... Can't believe I never thought of that. Thank you, I've been struggling with his for some time now.

  48. Is it simpler to add $('html').removeClass('js'); after the document ready? (That is assuming everything you're trying to hide occurs on document ready) Or am I just imagining that'll work?

  49. Pranav Sharma

    Hi ,
    In my case I am using and xml file consist of a images path and rendering images from that file using a .Now I am using cycle.all.js plugin to slide those images and My images dispersed the first time page loads so I used this <div style="height: 433px;width: 800px;overflow: hidden" class="pics" id="s2"> i.e I applied a style on a div in which images are rendering specifying its witdh and height same as images and that problem is corrected but now facing another problem that is my images are loading slowly and first images slides before fully load .
    ==================================== Full Code :-

    <div class="slides">
    <div style="height: 433px;width: 800px;overflow: hidden" class="pics" id="s2">
    $(function () {
          type: "GET",
            url: "/images/homepage/PhotoGallery.xml",    
            dataType: "xml",         
            success: function(xml) {   
             $(xml).find('img').each(function() {  
               var location = '/images/homepage/';    
               var url = $(this).attr('src');   
               var alt = $(this).attr('alt');
               .html('<a href="'+location+''+url+'" rel="nofollow"><img src="'+location+''+url+'" alt="'+alt+'" /></a>')
    <a href="#" rel="nofollow"><img width="10" height="10" style="border: 0px solid" alt="Next" src="/homeImages/arrow-right.gif" /></a>
    <a href="#" rel="nofollow"><img style="width: 10px;height: 10px;border: 0px solid" alt="prev" src="/homeImages/arrow-left.gif" /></a>
    function show() {
        fx: 'scrollHorz', 
        easing: 'linear',
        delay:  -2000,
    <!-- END .slider --></div></div>
  50. Jerry

    I tried the method, however, your said is not worked for me. :(

    I use a div with class background-image: to designate each png file.
    When not use below way, while my page first show, all image will show a flash as this page title said, after deploy below code, when open html page, the image could not show anymore, this is why?

    .js #slideshow{display: none;}
    	$(document).ready(function() {
    	// Stuff to do as soon as the DOM is ready
    • Hi Jerry,

      You misspelled "slideshow" in the line: $('#slidesow').show();

      Note the missing "h."

      I put together a jsfiddle page to give you another point of reference.

      • Jerry

        Hi Karl:
        Thanks for your reply, Maybe I do not decribe my problem clearly. Please allow me to explain it as below.
        I use JQuery Cycle Plugin to show 3 picture and texts as slides show. I use div to show image, and use a p to show text, and each image will have a related text. currently, these image and test can be shown as slide. however, when page load, I will see a flash of all image and all text are overlapped, after some time, as image and text has fade in/out, image and text can be shown as slide correctly. My problem is how to avoid all image and text shown incorrectly when page load. Thanks!

        ***I have added a space in each html tag of below code to avoid this page could not show source code correctly.****

         <div id="slideshow" class="slideshow">
                <div class="slide photo1" id="photo1">
                <div class="slide photo2" id="photo2">
               <div class="slide photo3" id="photo3">
        • Jerry, Please note the instruction for inserting html tags in your comments: "Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted." There is a toolbar button just above the comment field to assist you in doing that.

          Now to your question: you could provide a style rule like so:

          .js .slide { visibility: hidden; }

          And then bind a handler to window load to make those slides visible:

          $(window).bind('load', function() {
            $('div.slide').css('visibility', 'visible');
  51. Jerry

    Hi Karl:
    Thanks for your comments. I find that it still has some issue, Please check below code. You can see each div will have a element p to show some text, so when page load and use Cycle plugin to show these photo1/photo2/photo3, these element p's text will be overlapped, and they are shown as garbage text, even bind a handler to window load to make those slides visible, the text are all shown as garbage text, Thanks for your further help!

    <div id="slideshow" class="slideshow">
            <div class="slide photo1" id="photo1">
                 <p class="p slide_text" id="slide1_text"></p>
            <div class="slide photo2" id="photo2">
                 <p class="p slide_text" id="slide2_text"></p>
            <div class="slide photo3" id="photo3">
                 <p class="p slide_text" id="slide3_text"></p>
  52. What I've done to avoid FOUC is:

    · Set the body section as: <body style="visibility: hidden;" id="id_body" onload="js_Load()">

    · Write the js_Load() javascript function as: document.body.style.visibility='visible';

    With this approach the body of my web page keeps hidden until the full page and CSS files are loaded. Once everything is loaded the onload event turns the body visible. So, the web browser remains empty until a point when everything pops up on the screen.

    It is a simple solution but so far it is working.

  53. Know this is an old post but wanted to post this up for an option as well. It does cause multiple bodies but browsers will correct it. Feedback welome.

    <!doctype html>
          .js .omgash{display:none;}
          .js .ohshnap{display:block; color:green;}
          .nojs .omgash{display:block; color:red;}
          .nojs .ohshnap{display:none;}
      <body class="nojs">
      <!--[if lt IE 7]> <body class="nojs ie6"> <![endif]-->
      <!--[if IE 7]> <body class="nojs ie7"> <![endif]-->
      <!--[if IE 8]> <body class="nojs ie8"> <![endif]-->
      <body class="js">
      <!--[if lt IE 7]> <body class="js ie6"> <![endif]-->
      <!--[if IE 7]> <body class="js ie7"> <![endif]-->
      <!--[if IE 8]> <body class="js ie8"> <![endif]-->
          <b class="omgash">No Javascript</b>
          <b class="ohshnap">Javascript</b>
  54. I had some issues implementing this in Chrome for some reason. The workaround that seemed to fix it involved changing the '$' to 'jQuery':

    $(document).ready(function() {
    // DOM ready functions

    Hope that helps someone :-)

    (Before anyone comments, yes jQuery is the only library I am using)

  55. turtle

    I had some issues first as adding the class with jQuery('html').addClass('js'); left the images invisible and the slideshow did not start. I'm using jQuery cycle btw.

    My solution was to remove the class when page has loaded, pretty much as someone suggested earlier. Works like a charm, tho I still ended up using overflow:hidden approach in css.

    		fx: 'fade',
    		speed: 2000,
    		timeout: 5000,
  56. Pavel

    Perfect solution, i did something like that, just was making html not visible by js from head part. Was not use CSS, but this is the best way.


27 Pings

  1. The Complete jQuery Resource List for You to Become an Almighty Developer...

    Have you ever had to develop something yourself only to find out that there had already been a plugin developed?

    Don't you enjoy dreaming about what you could have on your site and finding the right plugin right away?

    Then you will find anything y...

  2. [...] entire row the same cursor as the checkbox. The rule is applied only if JavaScript is enabled (see my previous post for [...]

  3. Hawksworx » Blog Archive » Unobtrusify your Javascript

    [...] ‘FOOOOOOK’ by John Hicks) while the Javascript is being downloaded. This trick is very well explained by Karl Swedberg on the excellent learningjquery.com [...]

  4. [...] недавно случайно нашел замечательное решение одной небольшой проблемы, которая давно мозолила [...]

  5. Consejos para jQuery | Mantis Technology Solutions Blog

    [...] Añade una clase al objeto HTML para modificar elementos por CSS cuando el documento se haya cargado [...]

  6. A Better Way to {hide} with jQuery

    [...] Karl Swedberg has posted (some time ago) a great way to avoid the dreaded flash of “hidden” content when loading lengthy pages. [...]

  7. [...] 1 (Awesome) Way To Avoid the (Not So Excellent) Flash of (Amazing) Unstyled Content » Learning... - Schon etwas älter, aber immer wieder äußerst praktisch: Durch quot;ye plain olde JavaScriptquot; lassen sich Elemente per CSS dann verändern, wenn JavaScript aktiv ist. So lässt sich jede beliebige Oberfläche durch den kleinen Zusatz .js für die jeweiligen Browsergegebenheiten anpassen. [...]

  8. Quick Tip: Click Table Row to Trigger a Checkbox Click « Ajax Exmaple

    [...] entire row the same cursor as the checkbox. The rule is applied only if JavaScript is enabled (see my previous post for [...]

  9. [...] 可以来这里读取Karl Swedberg关于这个例子的全文: [...]

  10. [...] .JS #myDiv{display:none;} [/js] So, what this means is that we can hide content when JavaScript is switched on and then use jQuery to show it when necessary (e.g. by collapsing some panels and expanding them when the user clicks on them), while those with JavaScript off (and search engine spiders) see all of the content as it's not hidden. I'll be using this one a lot in the future. To read his full article click here. [...]

  11. [...] good. Scripts in the body block rendering so we can do better[1]: <head> <script>document.documentElement.className += [...]

  12. Hiding unstyled div that shows on page load « Sugar Blog

    [...] plugin called jflow that allows for autoscrolling.  The technique below was documented on the Learning jQuery site and uses a combination of javascript and css to hide the extra content until the page finishes [...]

  13. [...] Essa é velha mas é bom ter guardada. Link [...]

  14. [...] your styling in the css file where it should be? Body classes (another great ideas suggested by Karl Swedberg) allow you to do that. In short, you can use jQuery to add a ‘JS’ class to the body [...]

  15. [...] your styling in a css record where it should be? Body classes (another good ideas referred to by Karl Swedberg) concede we to do that. In short, we can have have have have have have have have make make make [...]

  16. [...] your styling in the css file where it should be? Body classes (another great ideas suggested by Karl Swedberg) allow you to do that. In short, you can use jQuery to add a ‘JS’ class to the body [...]

  17. [...] your styling in the css file where it should be? Body classes (another great ideas suggested by Karl Swedberg) allow you to do that. In short, you can use jQuery to add a ‘JS’ class to the body [...]

  18. [...] 1 Way To Avoid the Flash of Unstyled Content » Learning jQuery – Tips, Techniques, Tutorials This tutorial describes a way to avoid a flash of unstyled content that sometimes occurs when applying styles with JavaScript on page load. The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex. [...]

  19. Re : Document event before page is displayed? - Jquery Home

    [...] http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-contentView Complete Thread with Replies before, displayed, Document, event, page [...]

  20. [...] of the CSS model, but I've not thought about doing it much and I mainly got the idea from this FOUC trick, which uses this pattern, but in a very restricted and specific way. The main insight really is [...]

  21. [...] 1 Way To Avoid the Flash of Unstyled Content » Learning jQuery – Tips, Techniques, Tutorials (tags: jquery javascript css tutorial webdesign accessibility flash tips tricks) [...]

  22. [...] get around this by hiding the element with CSS but through JavaScript. Either by document write or some other method. You could of course hide it with css directly but then those with JS disabled won't get the [...]

  23. [...] 1 Way To Avoid the Flash of Unstyled Content » Learning jQuery – Tips, Techniques, Tutorials [...]

  24. [...] Here’s someone describing this problem – his description doesn’t even talk about async, but describes well the basic problem. Async may make it more visible than it was before, make the gap longer.  That page describes a clever workaround, which is hacky enough that you’ll be thinking “No way I want to introduce that to my codebase.” [...]

  25. [...] development there was noticeable flash of un-styled content. The problem turned out not to be the jQM framework itself, but in the VS2012 project template. The [...]

  26. [...] I saw some content flash onto the page before the animation had even started. Luckily, I found a clean and simple way to prevent FOUC that works [...]

Sorry, but comments for this entry are now closed.