web-dev-qa-db-fra.com

Comment puis-je afficher un gif de chargement jusqu'au chargement complet d'une page HTML?

J'ai une page Web très intensive via HTML et CSS, ce qui entraîne le chargement plus rapide de certains éléments que d'autres lorsqu'un utilisateur visite la page. L'arrière-plan peut prendre un certain temps à charger, et ainsi de suite ... Il devient assez moche de le voir charger élément par élément ... 

Je me demande donc comment je peux d'abord charger une page différente (page1, qui contient simplement un gif et des minimaux nus de html), puis page2 (page avec html intensif) n'apparaîtra que lorsque le navigateur du client aura récupéré toutes les pages html . 

Je pense que cela peut être fait avec JQuery, dont je ne connais presque rien ...

Tout conseil serait apprécié, merci,

javascriptjqueryhtml
12
Ilan Kleiman

Utilisez le code HTML suivant (en haut du corps, c'est mieux):

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

Et ce CSS:

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

Et le JavaScript suivant (utilise jQuery):

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

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);

Vous pouvez mettre les styles en ligne dans la variable div au lieu de dans une feuille de style pour réduire le risque de perte de contenu avant le chargeur. Vous pouvez également utiliser https://www.askapache.com/online-tools/base64-image-converter/ ou un outil similaire pour convertir votre GIF en URI base 64, et l'utiliser au lieu de spinner.gif.

29
Toothbrush
    <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>
5
Lucky Soni

J'ai implémenté à Laravel et cela a fonctionné comme prévu,

<style>
.loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background-color: #ffffffcf;
        }
        .loader img{
            position: relative;
            left: 40%;
            top: 40%;
        }
</style>

<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>

<script>
    window.onload = function() 
    {
        //display loader on page load 
        $('.loader').fadeOut();
    }

</script>
0
Amarja