Comments on: 1 Way To Avoid the Flash of Unstyled Content http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content Tips, techniques, and tutorials for the jQuery JavaScript library Wed, 08 Feb 2012 13:50:43 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: turtle http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-84346 turtle Fri, 26 Aug 2011 17:08:40 +0000 http://www.learningjquery.com/?p=105#comment-84346 I had some issues first as adding the class with <code>jQuery('html').addClass('js');</code> 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. <pre><code> jQuery('html').addClass('js'); jQuery(document).ready(function(){ jQuery('html').removeClass('js'); jQuery('#slides').cycle({ fx: 'fade', speed: 2000, timeout: 5000, }); });</code></pre> 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.


jQuery('html').addClass('js');
jQuery(document).ready(function(){
jQuery('html').removeClass('js');

jQuery('#slides').cycle({
		fx: 'fade',
		speed: 2000,
		timeout: 5000,
	});
});
]]> By: turtle http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-84345 turtle Fri, 26 Aug 2011 16:49:56 +0000 http://www.learningjquery.com/?p=105#comment-84345 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. 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.

]]> By: Niels http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83770 Niels Tue, 21 Jun 2011 02:54:08 +0000 http://www.learningjquery.com/?p=105#comment-83770 I had some issues implementing this in Chrome for some reason. The workaround that seemed to fix it involved changing the '$' to 'jQuery': <pre><code>jQuery('html').addClass('js'); $(document).ready(function() { // DOM ready functions }); </code></pre> Hope that helps someone :-) (Before anyone comments, yes jQuery is the only library I am using) I had some issues implementing this in Chrome for some reason. The workaround that seemed to fix it involved changing the ‘$’ to ‘jQuery’:

jQuery('html').addClass('js');
$(document).ready(function() {
// DOM ready functions
});

Hope that helps someone :-)

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

]]> By: Object hidden onload displays briefly - SitePoint Forums http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83751 Object hidden onload displays briefly - SitePoint Forums Sat, 04 Jun 2011 08:32:48 +0000 http://www.learningjquery.com/?p=105#comment-83751 [...] 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 [...] [...] 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 [...]

]]> By: Daniel Lopez http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83711 Daniel Lopez Wed, 18 May 2011 20:50:08 +0000 http://www.learningjquery.com/?p=105#comment-83711 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. <pre><code> <!doctype html> <html> <head> <style> .js .omgash{display:none;} .js .ohshnap{display:block; color:green;} .nojs .omgash{display:block; color:red;} .nojs .ohshnap{display:none;} </style> <title>js</title> </head> <noscript> <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]--> </noscript> <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]--> <div> <b class="omgash">No Javascript</b> <b class="ohshnap">Javascript</b> </div> </body> </html> </code></pre> 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>
<html>
  <head>
    <style>
      .js .omgash{display:none;}
      .js .ohshnap{display:block; color:green;}
      .nojs .omgash{display:block; color:red;}
      .nojs .ohshnap{display:none;}
    </style>
    <title>js</title>
  </head>

  <noscript>
  <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]-->
  </noscript>
  <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]-->

    <div>
      <b class="omgash">No Javascript</b>
      <b class="ohshnap">Javascript</b>
    </div>

  </body>
</html>
]]> By: wujitsu http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83702 wujitsu Fri, 13 May 2011 15:50:55 +0000 http://www.learningjquery.com/?p=105#comment-83702 great solution! Been searching for hiding some dom elements before page loads. Otherwise I'd have to forget about animation effects. great solution!
Been searching for hiding some dom elements before page loads.
Otherwise I’d have to forget about animation effects.

]]> By: Alvaro Duran http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83699 Alvaro Duran Thu, 12 May 2011 16:37:20 +0000 http://www.learningjquery.com/?p=105#comment-83699 What I've done to avoid FOUC is: · Set the body section as: <code><body style="visibility: hidden;" id="id_body" onload="js_Load()"></code> · Write the <code>js_Load()</code> javascript function as: <code>document.body.style.visibility='visible';</code> 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. 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.

]]> By: Jerry http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83657 Jerry Tue, 26 Apr 2011 05:58:40 +0000 http://www.learningjquery.com/?p=105#comment-83657 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! <pre><code><div id="slideshow" class="slideshow"> <div class="slide photo1" id="photo1"> <p class="p slide_text" id="slide1_text"></p> </div> <div class="slide photo2" id="photo2"> <p class="p slide_text" id="slide2_text"></p> </div> <div class="slide photo3" id="photo3"> <p class="p slide_text" id="slide3_text"></p> </div> <div> </code></pre> 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>
        <div class="slide photo2" id="photo2">
             <p class="p slide_text" id="slide2_text"></p>
        </div>
        <div class="slide photo3" id="photo3">
             <p class="p slide_text" id="slide3_text"></p>
        </div>
<div>
]]> By: Karl Swedberg http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83649 Karl Swedberg Sat, 23 Apr 2011 14:56:57 +0000 http://www.learningjquery.com/?p=105#comment-83649 Jerry, Please note the instruction for inserting html tags in your comments: "Use < instead of < and > 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: <pre><code>.js .slide { visibility: hidden; } </code></pre> And then bind a handler to window load to make those slides visible: <pre><code>$(window).bind('load', function() { $('div.slide').css('visibility', 'visible'); }); </code></pre> 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');
});
]]> By: Jerry http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/comment-page-1#comment-83645 Jerry Fri, 22 Apr 2011 02:06:22 +0000 http://www.learningjquery.com/?p=105#comment-83645 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.**** <pre><code> <div id="slideshow" class="slideshow"> <div class="slide photo1" id="photo1"> </div> <div class="slide photo2" id="photo2"> </div> <div class="slide photo3" id="photo3"> </div> <div> </code></pre> 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>
        <div class="slide photo2" id="photo2">

        </div>
       <div class="slide photo3" id="photo3">

        </div>
<div>
]]>