"Loader page"

Résolu/Fermé

X-developper - Modifié le 12 nov. 2020 à 10:33
jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 - 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:

Ajouter un loader pendant le chargement de vos pages web
Traduire une page web - Guide
Instagram web - Guide
Ajouter un compte gmail - Guide
Ajouter un profil netflix payant - Guide
Ajouter un compte whatsapp - Guide

7 réponses

Réponse 1 / 7

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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>

Réponse 2 / 7

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!

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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.

Réponse 3 / 7

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!

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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 ?

Réponse 4 / 7

X-developper
Modifié le 14 nov. 2020 à 09:18

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").

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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>

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

Posez votre question

Réponse 5 / 7

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....

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649 > jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024
14 nov. 2020 à 11:21

Remplace également

$(window).load(function(){
    $(".loader").fadeOut("1000");
 })

par

$(document).ready(function(){
   $(".loader").fadeOut("1000");
});

Réponse 6 / 7

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....

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
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

Réponse 7 / 7

X-developper
14 nov. 2020 à 11:49

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

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

Retrouver l'image originale après avoir fait des modifications ?

Chemin Logo du site de la Cité de l'espace

Discussions similaires

Newsletters