Comment afficher la division de chargement de la page jusqu'à ce que le chargement de la page soit terminé?

148

J'ai une section sur notre site Web qui se charge assez lentement car elle fait des appels intensifs.

Une idée de comment je peux faire divdire quelque chose de similaire à "chargement" à afficher pendant que la page se prépare, puis disparaît lorsque tout est prêt?

Shadi Almosri
la source

Réponses:

215

J'en avais besoin et après quelques recherches, j'ai trouvé ceci ( jQuery nécessaire):

Tout d'abord, juste après la <body>balise, ajoutez ceci:

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

Ajoutez ensuite la classe de style pour le div et l'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;
}

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

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Enfin, ajustez la position de l'image de chargement et celle background-colourdu div de chargement avec la classe de style.

Ça y est, ça devrait fonctionner très bien. Mais bien sûr, vous devez avoir un ajax-loader.gifquelque part. Freebies ici . (Cliquez avec le bouton droit> Enregistrer l'image sous ...)

mehyaa
la source
5
lors de la redirection vers une autre page, il reste dans la même page et affiche soudainement la page souhaitée, puis: affiche le volet de chargement dans la page précédente avant le déchargement ainsi que la page cible. window.onbeforeunload = function () {$ ('# loading'). show (); }
Sameh Deabes
2
+1 C'est court, doux et clair, j'adore ça. Cependant, je supprimerai ce div et ne laisserai que le <img> (;
Francisco Presencia
3
le chargement de l'image prend un certain temps, jusqu'à ce que la page soit déjà chargée
Elyor
1
Voir ma réponse pour éviter d'ajouter $('#loading').hide();à chaque chargement de page.
rybo111
Ce code Ajax fonctionnera efficacement et rapidement: smallenvelop.com/display-loading-icon-page-loads-completely
mai
36

Ce script ajoutera un div qui couvre toute la fenêtre pendant le chargement de la page. Il affichera automatiquement un spinner de chargement CSS uniquement. Il attendra que la fenêtre (et non le document) termine le chargement, puis il attendra quelques secondes supplémentaires facultatives.

  • Fonctionne avec jQuery 3 (il 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>

Victor Stoddard
la source
Comment ajouter ceci pour les balises imag?
Mano M
1
@ManoM se $(window).on("load", handler)déclenche lorsque tous les objets DOM ont terminé le chargement, y compris les images, les scripts, même les iframes. Si vous voulez attendre le chargement d'une image spécifique, utilisez$('#imageId').on("load", handler)
Victor Stoddard
Cela pour moi ne fonctionne que lorsque la page se charge pour la première fois, c'est-à-dire lorsque le navigateur / l'onglet est ouvert ou actualisé. Cependant, il n'apparaît pas lorsque la page se charge après son ouverture. J'ai une page avec des bascules montrant différents contenus et lorsque vous basculez entre les contenus, le chargement prend un certain temps. Existe-t-il un moyen d'adapter ce même code pour qu'il se charge non seulement la première fois que la page est ouverte, mais à chaque fois que le chargement prend du temps?
Joehat
1
@Joehat remplace $( "#loadingDiv" ).remove();par $( "#loadingDiv" ).hide();et ajoute $( "#loadingDiv" ).show();avant setTimeout(removeLoader, 2000);. J'ai fait supprimer le div pour rendre la page plus légère, mais cette correction la rend réutilisable.
Victor Stoddard
J'ai essayé votre code ... C'est étrange. Lorsque j'appelle ma page, une page vierge s'affiche (elle charge le contenu). Après quelques secondes (je pense que le contenu est chargé), il montre le chargeur pendant 2 secondes, puis la page complète. Vous pouvez jeter un oeil: criferrara.it/crigest/toshiba
lumière du
28

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 de fondu créé dans JS:

Dariusz J
la source
9

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

Tout d'abord, créez un CSS avec le nom de la classe Lockon qui est une superposition transparente avec le 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 toute la page en superposition chaque fois que la page est chargée

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

Maintenant, nous devons masquer cet écran de couverture chaque fois que la page est prête et afin que nous puissions 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 à chaque fois que la page se charge.

Maintenant, la question est après le chargement de la page, chaque fois que nous cliquons sur un bouton ou un événement qui prendra beaucoup de temps, nous devons le montrer dans l'événement de clic client comme indiqué ci-dessous

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

Cela signifie que lorsque nous cliquons sur ce bouton d'impression (ce qui prendra beaucoup de temps pour donner le rapport), il affichera notre écran de couverture avec GIF qui donne le cerésultat et une fois que la page est prête au-dessus de la fonction de chargement des fenêtres se déclenche et qui cache l'écran de couverture une fois que l'écran est complètement chargé.

Rinoy Ashokan
la source
1
Génial! seulement eu à les utiliser pour le rendre en plein écran: fixe; largeur: 100vw; hauteur: 100vh;
boateng
6

Le contenu par défaut est display:none, puis un gestionnaire d'événements qui le définit sur display:blockou similaire après son chargement complet. Ensuite, ayez un div défini sur display:blockavec "Chargement" dedans, et réglez-le display:nonedans le même gestionnaire d'événements qu'avant.

ambre
la source
1
quel événement utiliseriez-vous pour faire cela? Chargement de la page Javascript? ou y a-t-il un meilleur endroit?
Miles
Cela dépend si vous avez d'autres JS en train de configurer la page - si c'est le cas, appelez-le après que ceux-ci soient terminés, sinon, alors le chargement de document fonctionne correctement.
Ambre
2

Eh bien, cela dépend en grande partie de la façon dont vous chargez les éléments nécessaires dans `` l'appel intensif '', ma première pensée est que vous effectuez ces charges via ajax. Si tel 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 'display:block'/'display:none'options ci-dessus en conjonction avec $(document).ready(...)from jQuery est probablement la voie à suivre. La $(document).ready()fonction attend que la structure entière du document soit chargée avant de s'exécuter ( mais elle n'attend pas le chargement de tous les supports ). Vous feriez quelque chose comme ça:

$(document).ready( function() {
  $('table#with_slow_data').show();
  $('div#loading image or text').hide();
});
btelles
la source
malheureusement ce n'est pas via ajax, il attend que le script php prépare les données de la base de données, donc certains des éléments html sont chargés puis le navigateur attend la table de données avant de charger le reste. Ce qui pourrait
donner l'impression
Pour info: Le principe du Web (sans ajax) est qu'un serveur rend une page entière côté serveur et à la fin il envoie ce résultat (html) au navigateur. Si le rendu de la page est interrompu quelque part au milieu (alors que vous pouvez voir la page apparaître dans le navigateur), il ne peut pas s'agir d'un script php, car php ne fonctionne que côté serveur.
Peter le
Voir ma réponse pour éviter d'ajouter beforeSendet successà chaque appel ajax.
rybo111
2

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">

Jitendra Patel
la source
1

Créez un <div>élément qui contient votre message de chargement, donnez <div>un identifiant, puis lorsque votre contenu a fini de se charger, masquez le <div>:

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

... ou en JavaScript brut:

document.getElementById("myElement").style.display = "none";
Steve Harrison
la source
Simple et fait le travail. Du point de vue de la lisibilité, ce n'est pas $("#myElement").hide()plus facile pour les yeux?
user3613932
1

Voici le jQuery que j'ai fini par utiliser, qui surveille tous les démarrages / 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 de la réponse de mehyaa), ainsi qu'une hideclasse:

#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>
rybo111
la source
Le problème est que si j'ai une saisie semi-automatique chargée ajax dans une entrée, le chargeur apparaîtra.
Lucas le
0

Basé sur la réponse @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();
  });
Francisco Presencia
la source
1
Il vaut mieux utiliser hide()l'élément plutôt que remove()lui, afin que vous puissiez le réutiliser.
rybo111
0

Ce sera en synchronisation avec un appel api, lorsque l'appel api est déclenché, le chargeur est affiché. Lorsque l'appel à l'API réussit, le chargeur est supprimé. Cela peut être utilisé pour le chargement de la page ou pendant un appel API.

  $.ajax({
    type: 'GET',
    url: url,
    async: true,
    dataType: 'json',
    beforeSend: function (xhr) {
      $( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
      $("html, body").animate( { scrollTop: $(document).height() }, 100);
    },
    success: function (jsonOptions) {
      $('#searching-loader').remove();
      .
      .
    }
  });

CSS

.loader {
  border: 2px solid #f3f3f3;
  border-radius: 50%;
  border-top: 2px solid #3498db;
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin-top: 35px;
  margin-bottom: -35px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
SuperEye
la source
0

pour drupal dans votre fichier thème custom_theme.theme

function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}

Dans le fichier html.html.twig après ignorer le lien de contenu principal dans le corps

{% if preloader %} 
  <div id="test-preloader" >
    <div id="preloader-inner" class="cssload-container">
      <div class="wait-text">{{ 'Please wait...'|t }} </div> 
      <div class="cssload-item cssload-moon"></div>
    </div>
  </div>
{% endif %}  

dans un fichier css

#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}

.cssload-container .cssload-item {
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 131px;
 height: 131px;
 background-color: #fff;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 -moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
 }

.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
 }
Pradeep
la source