Layouts : content glitter/flash during page setup

[fguibert]

Hi

I'm facing a graphical issue with my layout contents loading on screen :
I setup a basic layout with east, west and center regions : when I reload any page, we see for a short time the raw content (not rendered) of all the regions and buttons aligned on the left side of the screen, and disappear when the layout is rendered

--> Is there any way to mask this raw content until the layout framework and buttons are ready to be screened ?
(an option like "showContentOnReadyState" ?)

here's two screenshot to illustrate my words
thanks a lot

[fguibert]

I finally found a simple solution :

- define html body invisible by default with CSS :

Code:

<style>
html { visibility:hidden; }
</style>

- set it visible on document.ready event (at the end of the page) :
 

Code:

<script>
	$(document).ready(function() {
		  document.getElementsByTagName("html")[0].style.visibility = "visible";
	});
 </script>

[andyj]

Thanks for that neat solution. Here's a slight modification to provide a brief fade-in.

Code:

<style>
  html { opacity:0; }
</style>
<script>
  $(document).ready(function() {
      document.getElementsByTagName("html")[0].style.opacity = 1;
      document.getElementsByTagName("html")[0].style.webkitTransition = 'opacity 1s 0s';
  });
 </script>