Print Page - Layouts : content glitter/flash during page setup

Title: Layouts : content glitter/flash during page setup
Post by: fguibert on May 07, 2019, 02:46:21 AM

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

Title: Re: Layouts : content glitter/flash during page setup
Post by: fguibert on May 07, 2019, 07:26:49 AM

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>

Title: Re: Layouts : content glitter/flash during page setup
Post by: andyj on March 23, 2023, 07:44:27 AM

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>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: fguibert on May 07, 2019, 02:46:21 AM