web-dev-qa-db-fra.com

Comment afficher Page Loading div jusqu'à ce que le chargement de la page soit terminé

Notre site Web contient une section qui se charge assez lentement car elle effectue des appels intensifs.
Avez-vous une idée de la façon dont je peux obtenir une div dire quelque chose de similaire au "chargement" à afficher pendant que la page se prépare, puis disparaître lorsque tout est prêt?

javascriptjqueryhtmldom
125
Shadi Almosri

J'ai eu besoin de cela et après quelques recherches sur Internet, j'ai trouvé ceci (jQuery nécessaire):

Tout de suite après la balise body, ajoutez ceci:

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

Ajoutez ensuite la classe de style pour div et image à votre CSS:

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

Et enfin, ajoutez ce javascript à votre page (de préférence à la fin de votre page, avant de fermer la balise <body> bien sûr):

<script language="javascript" type="text/javascript">
     $(window).load(function() {
     $('#loading').hide();
  });
</script>

Ajustez ensuite la position de l'image de chargement et la couleur d'arrière-plan de la div de chargement avec la classe de style d'aide.

Ça y est, ça fonctionne très bien. Mais bien sûr, vous devez avoir un ajax-loader.gif quelque part.

186
mehyaa

Ce script ajoutera un div qui couvre toute la fenêtre lors du chargement de la page. Un spinner de chargement en CSS uniquement s'affichera automatiquement. Il attendra que le chargement de la fenêtre (et non du document) se termine, puis attendra quelques secondes supplémentaires.

  • Fonctionne avec jQuery 3 (il y a un nouvel événement de chargement de fenêtre)
  • Aucune image nécessaire mais il est facile d'en ajouter une
  • Changer le délai pour plus de branding ou d'instructions
  • Seule la dépendance est jQuery.

Code du chargeur CSS de https://projects.lukehaas.me/css-loaders

    
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}
        .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading.

  <ul>
    <li>Works with jQuery 3, which has a new window load event</li>
    <li>No image needed but it's easy to add one</li>
    <li>Change the delay for branding or instructions</li>
    <li>Only dependency is jQuery.</li>
  </ul>

Place the script below at the bottom of the body.

CSS loader code from https://projects.lukehaas.me/css-loaders

<!-- Place the script below at the bottom of the body -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
26
Victor Stoddard
window.onload = function(){ document.getElementById("loading").style.display = "none" }
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} 
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>

Image de chargement de page avec le plus simple effet fadeout créé dans JS:

26
Dariusz J

J'ai une autre solution simple ci-dessous pour ce qui a parfaitement fonctionné pour moi.

Tout d’abord, créez un CSS avec le nom de la classe Lockon transparent qui se superpose au chargement de GIF, comme indiqué ci-dessous.

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 105%;
    height: 105%;
    background-color:white;
    vertical-align:bottom;
    padding-top: 20%; 
    filter: alpha(opacity=75); 
    opacity: 0.75; 
    font-size:large;
    color:blue;
    font-style:italic;
    font-weight:400;
    background-image: url("../Common/loadingGIF.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

Maintenant, nous devons créer notre div avec cette classe qui couvre la page entière en superposition lorsque la page est chargée.

<div id="coverScreen"  class="LockOn">
</div>

Nous devons maintenant masquer cet écran de couverture chaque fois que la page est prête et empêcher l’utilisateur de cliquer/déclencher un événement jusqu’à ce que la page soit prête.

$(window).on('load', function () {
$("#coverScreen").hide();
});

La solution ci-dessus conviendra au chargement de la page.

Maintenant que la question se pose après le chargement de la page, chaque fois que nous cliquons sur un bouton ou sur un événement qui durera longtemps, nous devons l'afficher dans l'événement de clic du client, comme indiqué ci-dessous.

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

Cela signifie que lorsque nous cliquons sur ce bouton d’impression (il faudra beaucoup de temps pour donner le rapport), l’écran de la couverture apparaît avec le format GIF qui donne this résultat et une fois que la page est prête au-dessus de Windows sur la fonction de chargement se déclenche et qui cachent l'écran de couverture une fois que l'écran est complètement chargé.

7
Rinoy Ashokan

Définissez le contenu par défaut sur display:none, puis définissez un gestionnaire d'événements lui attribuant la valeur display:block ou similaire, une fois son chargement terminé. Ensuite, ayez un div qui est réglé sur display:block avec "Chargement", et réglez-le sur display:none dans le même gestionnaire d’événements que précédemment.

6
Amber

Eh bien, cela dépend en grande partie de la façon dont vous chargez les éléments nécessaires dans "l'appel intensif". Je pensais initialement que vous effectuiez ces charges via ajax. Si c'est le cas, vous pouvez utiliser l'option 'beforeSend' et effectuer un appel ajax comme ceci:

$.ajax({
  type: 'GET',
  url: "some.php",
  data: "name=John&location=Boston",

  beforeSend: function(xhr){           <---- use this option here
     $('.select_element_you_want_to_load_into').html('Loading...');
  },

  success: function(msg){
     $('.select_element_you_want_to_load_into').html(msg);
  }
});

EDIT Je vois, dans ce cas, utiliser l'une des options 'display:block'/'display:none' ci-dessus en conjonction avec $(document).ready(...) de jQuery est probablement la voie à suivre. La fonction $(document).ready() attend que toute la structure du document soit chargée avant de s'exécuter (, mais n'attend pas que tous les supports soient chargés ). Vous feriez quelque chose comme ça:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
2
btelles

Mon blog fonctionnera à 100%.

function showLoader()
{
    $(".loader").fadeIn("slow");
}
function hideLoader()
{
    $(".loader").fadeOut("slow");
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
<div class="loader">
2
Jitendra Patel

Voici le jQuery que j'ai finalement utilisé, qui surveille tous les débuts et arrêts ajax, vous n'avez donc pas besoin de l'ajouter à chaque appel ajax:

$(document).ajaxStart(function(){
    $("#loading").removeClass('hide');
}).ajaxStop(function(){
    $("#loading").addClass('hide');
});

CSS pour le conteneur de chargement et le contenu (principalement tiré de la réponse de mehyaa), ainsi que pour la classe hide:

#loading {
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  z-index: 100;
}

.hide{
  display: none;
}

HTML:

<div id="loading" class="hide">
  <div id="loading-content">
    Loading...
  </div>
</div>
1
rybo111

Créez un élément <div> contenant votre message de chargement, attribuez un ID à <div>, puis, une fois le chargement du contenu terminé, masquez le <div>:

$("#myElement").css("display", "none");

... ou en clair JavaScript:

document.getElementById("myElement").style.display = "none";
1
Steve Harrison

Basé sur la réponse de @mehyaa, mais beaucoup plus court:

HTML (juste après <body>):

<img id = "loading" src = "loading.gif" alt = "Loading indicator">

CSS:

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  /* 1/2 of the height and width of the actual gif */
  margin: -16px 0 0 -16px;
  z-index: 100;
  }

Javascript (jQuery, puisque je l'utilise déjà):

$(window).load(function() {
  $('#loading').remove();
  });
0
Francisco Presencia