"Loader page"
Résolu
Bonjour,
J'aimerais faire une page de "loading" pour mon site web. J'ai donc créer un script en HTML et Css le voici:
Pourriez-vous me dire comment l'afficher au moment ou l'utilisateur du site change d'article.
Merci de votre aide!
PS: Voici le lien de la page du "loading": https://lesjeunesagissent.000webhostapp.com/Items/Articles/loader_page.html
J'aimerais faire une page de "loading" pour mon site web. J'ai donc créer un script en HTML et Css le voici:
<html>
<head>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".loader").fadeOut("1000"); })
</script>
<div class="loader">
</div>
<style>
.loader {
position : fixed;
z-index: 9999;
background : url('https://lesjeunesagissent.000webhostapp.com/Pictures/loader_files/ressource-loader-4.gif') 50% 50% no-repeat;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
background-color: blue;
}
</style>
</body>
</html>
Pourriez-vous me dire comment l'afficher au moment ou l'utilisateur du site change d'article.
Merci de votre aide!
PS: Voici le lien de la page du "loading": https://lesjeunesagissent.000webhostapp.com/Items/Articles/loader_page.html
Configuration: Windows / Chrome 86.0.4240.198
7 réponses
-
ModérateurBonjour,
Tu dois placer ce code, dans le code html qui te permet de charger tes articles.
(juste le code Javascript et CSS... et la div du loader)
En gros, dans ta page qui permet d'afficher tes articles,
Tu inclus jquery (si ce n'est pas déjà fait )<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Tu y places la div pour le loader<div class="loader"></div>
Tu y mets le css.loader { position : fixed; z-index: 9999; background : url('https://lesjeunesagissent.000webhostapp.com/Pictures/loader_files/ressource-loader-4.gif') 50% 50% no-repeat; top : 0px; left : 0px; height : 100%; width : 100%; cursor : wait; background-color: blue; }
Tu y ajoutes le code JS qui permet de déclencher l'affichage de ce loader<script type="text/javascript"> $(window).load(function(){ $(".loader").fadeOut("1000"); }) </script>
-
Bonjour,
merci pour ta réponse Jordane45, mais je voulais justement savoir comment lier cette page de "loading" à mon site web! c'est-à-dire, quand les utilisateurs de mon site cliquent sur un article la page "loading" s'affiche. Pour cela je pense qu'il faut un script sur toute mes pages "qui dit que quand" je clique sur un lien du site, (un article) la page "loading" s'affiche.
Peux-tu me préciser aussi ce que tu veux dire par "le code html qui te permet de charger tes articles" STP?
Merci encore pour ton aide! -
Bonjour,
OK, j'ai mis le code du loader entre les "<body>" de tous les articles de mon site, mais la div du loader reste sur la page et cache le site (et ne s'enlève pas). Voici le lien de mon site: https://lesjeunesagissent.000webhostapp.com/Items/Accueil.html
Merci pour ta réponse! -
Encore merci!
En effet j'ai retiré le "loader", je te le remets tout de suite. Mais de toute façon la seule chose que tu pourras voir sera une div de chargement qui reste ouverte jusqu'à l'infini.... (Cette fois, je ne mets que le "loader" dans la partie "accueil").-
ModérateurAffiche la console javascript de ton navigateur et tu y verras une jolie erreur.....
Ton site étant en https, il faut que les liens que tu y mets soient également en https.
c'est valable également pour la librairie jquery
Au passage, remplace ta lib jquery par celle la<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-
-
Merci beaucoup!
J'ai bien appliqué tes modifications. Mais (hélas) il y a un autre message d'erreur qui s'affiche dans la console....-
ModérateurTu as différents soucis dans le code de ta page
pour commencer... tu as visiblement essayé d'y mettre du PHP<script language="php"> <?php if($_POST) { $message=$_POST['1$']; $message .=$_POST['2$']; $message .=$_POST['champtexte3']; mail("william.pilote52@gmail.com", "sujet du courrier", $message, "From: william.pilote52@gmail.com") ; } ?> </script>
Pour que ça marche... il faut que tu nommes tes pages en .php et non en .html -
Modérateur@jordane45Remplace également
$(window).load(function(){ $(".loader").fadeOut("1000"); })
par$(document).ready(function(){ $(".loader").fadeOut("1000"); });
-
-
Ce script php est un ancien script que je n'utilise plus. Il a été remplacé par une page externe : le système de newsletters provisoire (qui est en .php). Il sera supprimé, de toute façon car il me semble qu'il comporte des erreurs. Cela ne résous pas ce petit problème de loader....
-
Mille merci pour ton aide Jordane45! Maintenant le "loader" fonctionne à merveille grâce à toi!
A bientôt!
