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?
Réponses:
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
$('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>$(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();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.
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:
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 
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é.
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.
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();
});beforeSendet successà chaque appel ajax.
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">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";$("#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:
$(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>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();
});hide()l'élément plutôt que remove()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.
$.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); }
}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;
}