"Loader page" [Résolu]

Signaler
-
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
-
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

7 réponses

Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047
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>



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!
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047
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.

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!
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047
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 ?
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").
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047
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>

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....
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047
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
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047 >
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020

Remplace é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....
Messages postés
30472
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2020
3 047
Si, il peut générer une erreur dans la page et donc empecher ce qui se trouve en dessous de fonctionner correctement

Mille merci pour ton aide Jordane45! Maintenant le "loader" fonctionne à merveille grâce à toi!
A bientôt!