French ↓ Menu ↓

# How to preload your site with style

## 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.

Loading…

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.

    ...
    <body>
    <div id="blackpage">
        content to display during the loading.
    </div>
    ...

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!

RSS · Tweet · FB
These social sharing links preserve your privacy
↑ Top ↑
Published on 2009-10-03
Follow @yogsototh
Yann Esposito©
Done with Vim spacemacs & nanoc Hakyll

ADA: `DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp`