J'ai une section de notre site Web qui se charge assez lentement car elle effectue des appels intensifs.
Une idée de comment je peux obtenir un div pour dire quelque chose de similaire à "chargement" pour montrer pendant que la page se prépare et puis disparaître quand tout est prêt ?
J'en ai eu besoin et après quelques recherches, j'ai trouvé ceci ( jQuery nécessaire) :
D'abord, juste après le <body> tag ajouter ceci :
<div id="loading">
<img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>Ajoutez ensuite la classe de style pour le div et l'image à votre CSS :
#loading {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}
#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 fermeture </body> bien sûr) :
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>Enfin, ajustez la position de l'image de chargement et de l'élément background-color de la division de chargement avec la classe de style.
C'est ça, ça devrait bien marcher. Mais bien sûr, vous devriez avoir un ajax-loader.gif quelque part ou utiliser l'url base64 pour les images src valeur. Freebies aquí . (Clic droit > Enregistrer l'image sous...)
Pour jQuery 3.0 et plus, vous pouvez utiliser :
<script>
$(window).on('load', function () {
$('#loading').hide();
})
</script>La réponse originale date de jQuery et d'avant l'ère du flexbox. Vous pouvez utiliser de nombreuses bibliothèques et cadres de gestion de vues comme Angular, React et Vue.js. Et pour CSS, vous avez l'option flexbox. Voici une alternative CSS :
#loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}
#loading-image {
z-index: 100;
}
Lors de la redirection vers une autre page, il reste dans la même page et affiche soudainement la page souhaitée, puis : afficher le panneau de chargement dans la page précédente avant le déchargement ainsi que la page cible. window.onbeforeunload = function () { $('#loading').show() ; }
+1 C'est court, doux et clair, j'adore. Cependant, je vais enlever ce div et ne laisser que le <img> ( ;
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 fondu enchaîné effet créé en JS :
Le contenu par défaut est display:none et avoir un gestionnaire d'événement qui lui donne la valeur suivante display:block ou similaire après qu'il soit complètement chargé. Ensuite, vous avez une div qui est définie comme display:block avec "Loading" dedans, et le régler sur display:none dans le même gestionnaire d'événements que précédemment.
Quel événement utiliseriez-vous pour faire cela ? Le chargement de la page Javascript ? ou y a-t-il un meilleur endroit ?
Cela dépend en grande partie de la manière dont vous chargez les éléments nécessaires à l'"appel intensif". Ma première idée est que vous effectuez ces chargements via ajax. Si c'est le cas, vous pouvez utiliser l'option "beforeSend" et faire 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);
}
});EDITAR Je vois, dans ce cas, l'utilisation d'une des 'display:block'/'display:none' les options ci-dessus en conjonction avec $(document).ready(...) de jQuery est probablement la meilleure solution. Le site $(document).ready() attend que toute la structure du document soit chargée avant de l'exécuter ( mais il n'attend pas que tous les médias soient chargés. ). Vous feriez quelque chose comme ça :
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
Malheureusement ce n'est pas par ajax, c'est en attendant que le php script 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 que la page a calé, il faut donc afficher quelque chose à cet endroit pour montrer que "quelque chose se passe" et ne pas faire fuir l'utilisateur...
Pour info : Le principe du web (sans ajax) est qu'un serveur rend une page entière côté serveur et qu'à la fin il envoie ce résultat (html) au navigateur. Si le rendu de la page s'arrête quelque part au milieu (alors que vous pouvez voir la page apparaître dans le navigateur), il ne peut s'agir d'un script de php, car php ne s'exécute que côté serveur.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
