Installer un loader en attendant de charger une page.
Fermé
lamontange
Messages postés
133
Date d'inscription
jeudi 3 décembre 2020
Statut
Membre
Dernière intervention
29 septembre 2023
-
15 mai 2022 à 13:48
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 15 mai 2022 à 14:52
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 15 mai 2022 à 14:52
A voir également:
- Ajouter un loader pendant le chargement de vos pages web
- Traduire une page web - Guide
- Instagram web - Guide
- Ajouter un profil netflix payant - Guide
- Ajouter un compte gmail - Guide
- Ajouter un compte whatsapp - Guide
4 réponses
lamontange
Messages postés
133
Date d'inscription
jeudi 3 décembre 2020
Statut
Membre
Dernière intervention
29 septembre 2023
6
15 mai 2022 à 13:59
15 mai 2022 à 13:59
J'ai trouvé grace à ce jsfiddle
https://jsfiddle.net/colas/923xb0tm/1/
Mais comment le faire débuter avant que la page n'apparaisse qq milli secondes ?
Merci ! ;)
https://jsfiddle.net/colas/923xb0tm/1/
Mais comment le faire débuter avant que la page n'apparaisse qq milli secondes ?
Merci ! ;)
lamontange
Messages postés
133
Date d'inscription
jeudi 3 décembre 2020
Statut
Membre
Dernière intervention
29 septembre 2023
6
15 mai 2022 à 14:09
15 mai 2022 à 14:09
Décidément... c'est bon... c'était un problème avec Dreamweaver.
Mais comment réduire la durée du loading ?
Voici mes scripts :
Merci,
LM
Mais comment réduire la durée du loading ?
Voici mes scripts :
<script>
$(window).load(function(){
$(".loader").fadeOut("1000"); })
</script>
<script>
$('.button-class').click(function (){
var btn = $(this);
$(btn).buttonLoader('start');
setTimeout(function (){
$(btn).buttonLoader('stop');
},
5000);
});
</script>
Merci,
LM
Salut,
qu'appelez vous un loader?
Si vous parlez d'une barre de progrès qui affiche le temps de chargement il faut en effet passer par la programmation.
_la fonction loader en JQuery(qui est une bibliothèque JavaScript) ne sert pas à cela mais bien à charger un contenu.
https://api.jquery.com/load/
_votre code est faux et devrait afficher une erreur dans la console.
En effet vous ne fermez ni l'accolade de la fonction anonyme ni la parenthèse de la méthode ".load" qui sert à charger un contenu et non à autre chose.
_Pour afficher la progression du chargement d'un élément il faut obtenir son poids total en octets ainsi que le poids en octet déjà chargé. Le reste est assez simple à partir de là si vous voulez un pourcentage vous faites une règle de trois et l'affichez en suite par le DOM(représentation virtuelle de la page incluse dans JavaScript et qui permet d'accéder aux éléments de la page, par exemple pour enlever/ajouter/modifier un élément comme par exemple son contenu).
Si vous voulez le faire sur plusieurs éléments il faudra faire en fonction.
Vous pouvez aussi regarder du côté des événements comme "onLoad"(qui signifie "au chargement") qui permet de savoir le status du chargement(non démarré, en cours, chargé)
_Avec JQuery dans l'utilisation de base vous commencez par vérifier que la page est chargée(effectivement vu que le JavaScript fonctionne dans la page elle même si la page n'est pas chargée il n'y a pas de JavaScript...) et ensuite incluez vos instructions dans l'espace de cette fonction.
Hors vous ne le faites pas.
Voici comme cela doit être fait:
https://learn.jquery.com/using-jquery-core/document-ready/
_Avant d'utiliser JQuery vous devez connaître et savoir utiliser JavaScript car JQuery n'est qu'une utilisation de JavaScript(une bibliothèque logicielle = un fichier de fonctions et objets JavaScript) qui est parfois regrettable si c'est pour une seule fonction mais bon là n'est pas le sujet.
_Pour apprendre une seule solution: se retrousser les manches et bosser.
Bon travail alors.
Attention aussi la balise H1 en HTML indique le tire de la page qui sert à référencer et indexer le contenu de vos pages. Ce n'est donc clairement pas une bonne idée de l'utiliser autrement surtout qu'au niveau des balises pour du texte ça ne manque pas en HTML.
Quand vous aurez les notions de base en JavaScript et programmation vous pouvez vous tourner vers des cours et exemples sur le sujet (barre de chargement et non loader qui veut dire charger un fichier, une image, un texte ou ce que l'on veut mais consiste à charger un contenu et non regarder sa progression pour pouvoir afficher un %, cercle oui ce que l'on veut qui représente la progression du chargement) comme celui ci qui présente un version avec JQuery qui ressemble pas mal à ce que vous avez essayé(moins les erreurs):
https://eticweb.info/tutoriels-javascript/afficher-une-barre-de-chargement-avant-que-la-page-entiere-ne-soit-chargee/
ps:ce seront surtout les fichiers multimédias(images, sons, vidéos) qui prendront du temps à charger donc c'est sur ces fichiers que vous devez vous concentrer si votre page est lente à charger. Bien sûr baisser la taille des images ou autre élément est indispensable sur le web où la majorité des utilisateurs utilisent un mobile pour consulter des pages(donc oubliez les images en haute qualité et grandes tailles, ça servira à rien dans plus de la moitié des cas et va juste ralentir le chargement de votre page, ce qui peut inciter l'utilisateur à simplement aller sur un autre site parce que c'est trop long et en tout cas rendra sa navigation désagréable et va pas l'inciter à rester sur votre site pour attendre, barre de chargement affichée ou pas).
qu'appelez vous un loader?
Si vous parlez d'une barre de progrès qui affiche le temps de chargement il faut en effet passer par la programmation.
_la fonction loader en JQuery(qui est une bibliothèque JavaScript) ne sert pas à cela mais bien à charger un contenu.
https://api.jquery.com/load/
_votre code est faux et devrait afficher une erreur dans la console.
En effet vous ne fermez ni l'accolade de la fonction anonyme ni la parenthèse de la méthode ".load" qui sert à charger un contenu et non à autre chose.
_Pour afficher la progression du chargement d'un élément il faut obtenir son poids total en octets ainsi que le poids en octet déjà chargé. Le reste est assez simple à partir de là si vous voulez un pourcentage vous faites une règle de trois et l'affichez en suite par le DOM(représentation virtuelle de la page incluse dans JavaScript et qui permet d'accéder aux éléments de la page, par exemple pour enlever/ajouter/modifier un élément comme par exemple son contenu).
Si vous voulez le faire sur plusieurs éléments il faudra faire en fonction.
Vous pouvez aussi regarder du côté des événements comme "onLoad"(qui signifie "au chargement") qui permet de savoir le status du chargement(non démarré, en cours, chargé)
_Avec JQuery dans l'utilisation de base vous commencez par vérifier que la page est chargée(effectivement vu que le JavaScript fonctionne dans la page elle même si la page n'est pas chargée il n'y a pas de JavaScript...) et ensuite incluez vos instructions dans l'espace de cette fonction.
Hors vous ne le faites pas.
Voici comme cela doit être fait:
https://learn.jquery.com/using-jquery-core/document-ready/
_Avant d'utiliser JQuery vous devez connaître et savoir utiliser JavaScript car JQuery n'est qu'une utilisation de JavaScript(une bibliothèque logicielle = un fichier de fonctions et objets JavaScript) qui est parfois regrettable si c'est pour une seule fonction mais bon là n'est pas le sujet.
_Pour apprendre une seule solution: se retrousser les manches et bosser.
Bon travail alors.
Attention aussi la balise H1 en HTML indique le tire de la page qui sert à référencer et indexer le contenu de vos pages. Ce n'est donc clairement pas une bonne idée de l'utiliser autrement surtout qu'au niveau des balises pour du texte ça ne manque pas en HTML.
Quand vous aurez les notions de base en JavaScript et programmation vous pouvez vous tourner vers des cours et exemples sur le sujet (barre de chargement et non loader qui veut dire charger un fichier, une image, un texte ou ce que l'on veut mais consiste à charger un contenu et non regarder sa progression pour pouvoir afficher un %, cercle oui ce que l'on veut qui représente la progression du chargement) comme celui ci qui présente un version avec JQuery qui ressemble pas mal à ce que vous avez essayé(moins les erreurs):
https://eticweb.info/tutoriels-javascript/afficher-une-barre-de-chargement-avant-que-la-page-entiere-ne-soit-chargee/
ps:ce seront surtout les fichiers multimédias(images, sons, vidéos) qui prendront du temps à charger donc c'est sur ces fichiers que vous devez vous concentrer si votre page est lente à charger. Bien sûr baisser la taille des images ou autre élément est indispensable sur le web où la majorité des utilisateurs utilisent un mobile pour consulter des pages(donc oubliez les images en haute qualité et grandes tailles, ça servira à rien dans plus de la moitié des cas et va juste ralentir le chargement de votre page, ce qui peut inciter l'utilisateur à simplement aller sur un autre site parce que c'est trop long et en tout cas rendra sa navigation désagréable et va pas l'inciter à rester sur votre site pour attendre, barre de chargement affichée ou pas).
lamontange
Messages postés
133
Date d'inscription
jeudi 3 décembre 2020
Statut
Membre
Dernière intervention
29 septembre 2023
6
15 mai 2022 à 14:52
15 mai 2022 à 14:52
Merci DoctorHow,
Vous êtes trop pointu pour moi qui suis nul en js et en programmation. Mais merci encore de m'avoir répondu.^^
Actuellement, mon loader fonctionne sur Firefox/Safari/Chrome... mais seulement en local.
En ligne, la div "opaque" et le loader restent affichés.
Auriez-vous une explication ?
Encore merci,
LM
Vous êtes trop pointu pour moi qui suis nul en js et en programmation. Mais merci encore de m'avoir répondu.^^
Actuellement, mon loader fonctionne sur Firefox/Safari/Chrome... mais seulement en local.
En ligne, la div "opaque" et le loader restent affichés.
Auriez-vous une explication ?
Encore merci,
LM
.custom-loading-spinner {
cursor: progress;
position: absolute;
width: 100%;
height: 100%;
}
.custom-loading-spinner::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 10001;
overflow: hidden;
background: white;
opacity: 0.6;
}
.custom-loading-spinner::after {
box-sizing: border-box;
z-index: 10002;
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: cf-loading 1s linear infinite;
}
@keyframes cf-loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".loader").fadeOut("1000"); })
</script>
<script>
$('.button-class').click(function (){
var btn = $(this);
$(btn).buttonLoader('start');
setTimeout(function (){
$(btn).buttonLoader('stop');
},
5000);
});
</script>
Modifié le 15 mai 2022 à 14:45
Toutes les réponses se trouvent dans ma réponse précédente où j'indique que si la page n'est pas chargée il ne peut pas avoir de programme JavaScript(ni même grand chose affichée).
Ce seront les fichiers volumineux externes qui prendront du temps à charger parce que du texte (HTML, CSS? JavaScript...) c'est rapide à charger car très peu volumineux(en octets)..