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?
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 ...)
$('#loading').hide();à chaque chargement de page.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.
Code du chargeur CSS de https://projects.lukehaas.me/css-loaders
la source
$(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)$( "#loadingDiv" ).remove();par$( "#loadingDiv" ).hide();et ajoute$( "#loadingDiv" ).show();avantsetTimeout(removeLoader, 2000);. J'ai fait supprimer le div pour rendre la page plus légère, mais cette correction la rend réutilisable.Image de chargement de page avec le plus simple effet de fondu créé dans JS:
la source
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
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
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
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
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
ré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é.
la source
Le contenu par défaut est
display:none, puis un gestionnaire d'événements qui le définit surdisplay:blockou similaire après son chargement complet. Ensuite, ayez un div défini surdisplay:blockavec "Chargement" dedans, et réglez-ledisplay:nonedans le même gestionnaire d'événements qu'avant.la source
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:
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:la source
beforeSendetsuccessà chaque appel ajax.Mon blog fonctionnera à 100%.
la source
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>:... ou en JavaScript brut:
la source
$("#myElement").hide()plus facile pour les yeux?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:
CSS pour le conteneur de chargement et le contenu (principalement de la réponse de mehyaa), ainsi qu'une
hideclasse:HTML:
la source
Basé sur la réponse @mehyaa, mais beaucoup plus court:
HTML (juste après
<body>):CSS:
Javascript (jQuery, puisque je l'utilise déjà):
la source
hide()l'élément plutôt queremove()lui, afin que vous puissiez le réutiliser.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.
CSS
la source
pour drupal dans votre fichier thème custom_theme.theme
Dans le fichier html.html.twig après ignorer le lien de contenu principal dans le corps
dans un fichier css
la source