Comment puis-je afficher un gif de chargement jusqu'à ce qu'une page html entière soit chargée

J'ai une page web qui est assez intensif via HTML et CSS, ce qui conduit à certains éléments de chargement plus rapides, puis les autres quand un utilisateur visite la page. L'arrière-plan peut prendre un certain temps à charger, et ainsi de suite... C'est assez moche de voir tout cela de charge de l'élément par élément...

Alors je me demandais comment je peux d'abord charger une autre page (page1, qui a simplement un gif et nu minimals de html), puis page2 (page intensif html) apparaît seulement après que le navigateur du client a récupéré toutes les pages html.

Je crois que cela peut être fait avec JQuery, je ne connaissais presque rien...

Tout conseil serait apprécié,
Merci,

source d'informationauteur Ilan Kleiman

  1. 25

    Utiliser le code HTML suivant:

    <div id="loading"></div>

    Et ce CSS:

    #loading {
    position: absolute; width: 100%; height: 100%; background: url('spinner.gif') no-repeat center center;
}

    Et suivants jQuery:

    $(window).ready(function() {
    $('#loading').hide();
});

    Aussi, vous pouvez utiliser https://www.askapache.com/online-tools/base64-image-converter/ de convertir vos GIF de base-64 string, et utiliser à la place de spinner.gif.

  2. 4
        <div id="overlay"></div>
<style>
    #overlay {
        position: fixed;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .hide {
        display: none;
    }
</style>
<script>
    $(window).load(function() {
     $('#overlay').addClass('hide');
    });
</script>