"Loader page"

Résolu/Fermé
X-developper - Modifié le 12 nov. 2020 à 10:33
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
- 14 nov. 2020 à 11:50
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:
 <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
A voir également:

7 réponses

jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274
12 nov. 2020 à 11:34
Bonjour,

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>


1
X-developper
13 nov. 2020 à 15:09
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!
1
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274
13 nov. 2020 à 16:24
Comment expliquer.....

Ton "loader" ne doit pas être une "page" à part .... mais inclus dans le code html de toutes tes pages.

Mais ne sachant pas comment tu as réalisé ton site.. impossible de t'en dire plus.
0
X-developper
14 nov. 2020 à 05:25
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!
1
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274
14 nov. 2020 à 07:53
Visiblement tu as retiré ton loader.. je ne peux donc pas le voir....

En plus de ta div et de son css ... as tu également mis le javascript qui va avec ??
As tu bien inclus jquery sur chaque page également ?
0
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").
1
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274
14 nov. 2020 à 10:28
Affiche 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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
X-developper
14 nov. 2020 à 11:04
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....
1
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274
14 nov. 2020 à 11:12
Tu 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
0
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274 > jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022

14 nov. 2020 à 11:21
Remplace également
$(window).load(function(){
    $(".loader").fadeOut("1000");
 })

par
$(document).ready(function(){
   $(".loader").fadeOut("1000");
});
0
X-developper
14 nov. 2020 à 11:28
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....
0
jordane45
Messages postés
36038
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
9 août 2022
4 274
14 nov. 2020 à 11:50
Si, il peut générer une erreur dans la page et donc empecher ce qui se trouve en dessous de fonctionner correctement
0
X-developper
14 nov. 2020 à 11:49
Mille merci pour ton aide Jordane45! Maintenant le "loader" fonctionne à merveille grâce à toi!
A bientôt!
0