"Loader page"

Résolu
X-developper -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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

Réponse 1 / 7
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 2 / 7
X-developper
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 3 / 7
X-developper
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 4 / 7
X-developper
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 5 / 7
X-developper
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
Remplace également 
$(window).load(function(){
    $(".loader").fadeOut("1000");
 })

par 
$(document).ready(function(){
   $(".loader").fadeOut("1000");
});
0
Réponse 6 / 7
X-developper
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Si, il peut générer une erreur dans la page et donc empecher ce qui se trouve en dessous de fonctionner correctement
0
Réponse 7 / 7
X-developper
 
Mille merci pour ton aide Jordane45! Maintenant le "loader" fonctionne à merveille grâce à toi!
A bientôt!
0

Discussions similaires

connection ok mais aucune page ne s'affiche
gandounet -
fabiennetitou -

10 réponses