scratch/content/html/en/blog/2009-10-How-to-preload-your-site-with-style.md at d00db178d51445f05e0f4e9c2d3737aa6d4027f1

yogsototh/scratch

Fork 0

Yann Esposito (Yogsototh) 88c9f832df Clean content pages

2010-04-29 15:43:21 +02:00

2.5 KiB

Raw Blame History

isHidden

menupriority

kind

created_at

title

Example

Here is a live example of what appear while loading my pages.

Hello! I've finished loading!

Click me to see me disapear again.

I first tried to integrate queryLoader, but it didn't fill my needs.

The plugin add a black div to hide all the content. But as the script had to be launched at the end of the source code my website show for a small time.

In order to hide this small artefact, here is how I do that.

Code

In a first time, I added at the top of the body the div hiding all the content.


...


    content to display during the loading.

...

and here is the associated CSS to #blackpage:


#blackpage
  top: 0 
  left: 0 
  width: 100%
  height: 100%
  margin-left: 0
  margin-right: 0
  margin-top: 0
  margin-bottom: 0
  position: absolute
  text-align: center
  color: #666
  padding-top: 10em
  background-color: #eee
  z-index: 9000

and the associated jQuery code:


$(document).ready(function(){
    $('#blackpage').fadeOut();
});

Yes, it is as simple as that. And, putting the #blackpage div at the top of my page, I ensure to hide anything while loading.

I hope it had helped you!

2.5 KiB Raw Blame History

Example

Code

2.5 KiB

Raw Blame History