Anglais ↓ Menu ↓

# Charger une page web avec style

## Exemple

Voici comment apparaissent mes pages pendant leur chargement.

    <p>Voilà ! Je suis chargée !</p>
    <p>Cliquez-moi dessus pour recommencer.</p>
    <div id="todisapear" style="color: #000; position:absolute;top:0;left:0;text-align: center; padding-top: 1em; width: 100%; background-color: #eee; height: 8em;">
    Loading...
    <img style="border: none; background-color: none; background: none" src="/Scratch/img/loading.gif" alt="loading logo"/>
    </div>
    <script>
    function Rabbit(){
        $('#todisapear')
            .show()
            .animate({opacity: 1.0},3000)
            .fadeOut();
    }
    $(document).ready(function(){
        $('#todisapear').animate({opacity: 1.0},3000).fadeOut();
        $('#demo').click(Rabbit);
    });
    </script>

J’ai d’abord essayé d’intégrer queryLoader, mais il ne comblait pas mes besoins.

Ce plugin ajoutait un ‘div’ noir pour cacher le contenu du site. Cependant, comme le script doit être lancé à la fin du code source. Pendant un petit moment, on peut voir mon site en train de se mettre à jour.

Pour cacher ce petit ‘artefact’, voici comment je m’y suis pris.

## Code

D’abort il faut ajouter tout en haut du body cette fois un div qui va être le voile noir qui va tout cacher.

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

et le CSS correspondant au div `#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

ainsi que le code jQuery associé :

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

Oui, c’est aussi simple que ça. Maintenant ajouter le `#blackpage` tout en haut de ma page me permet d’être certain de tout cacher pendant le chargement de la page.

J’espère que ça a pu vous être utile !

RSS · Tweet · FB
Ces liens sociaux préservent votre vie privée
↑ Top ↑
Published on 2009-10-03
Follow @yogsototh
Yann Esposito©
Done with Vim spacemacs & nanoc Hakyll

ADA: `DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp`