Cacher un preloader de page sur clic
Résolu
animostab
Messages postés
3003
Statut
Membre
-
animostab Messages postés 3003 Statut Membre -
animostab Messages postés 3003 Statut Membre -
Bonjour aux experts javascript
voila je bloque sur un truc depuis un moment
j'ai un petit preloader de page que voici (il marche parfaitement)
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(300);
$('#status1').fadeOut(300); // will first fade out the loading animation
$('#preloader').delay(300).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(300).css({'overflow':'visible'});
})
ensuite le html juste après <body> (dans les div, il y a en background css les images de loader)
<div id="preloader">
</div>
<div id="status">
<div id="status1"></div>
<h1>Chargement</h1>
<p><a href="" onClick="javascript:pasloader();">Afficher la page</a></p>
</div>
j'ai mis #preloader et #status en display:none; pour éviter que les utilisateurs ayant désactivé javascript ne voient le truc tourner sans que ca fadeout après le chargement de la page
Pour afficher les div ci dessus avec javascript j'ai fait juste après <body>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
Puis j'ai fait une fonction qui cache les div au cas ou on voudrait afficher la page
<script type="text/javascript">
function pasloader(){
document.getElementByid("preloader").style.display="none";
document.getElementByid("status").style.display="none";
}
</script>
la fonction est appelée par clic
<p><a href="" onClick="javascript:pasloader();">Afficher la page</a></p>
Evidemment quand on clic on dirait que ca veux recharger la page mais ca ne cache pas les div du preloader.
je sais que ce ne doit pas être la bonne méthode, donc j'aimerais pouvoir ,sur le clic, masquer / supprimer les div et comme avec javascript, je suis plutot noob, merci d'avance de bien vouloir m'offrir la solution
voici la page de test avec les commentaire pour se repérer et tout inpage
https://www.clownroberto.com/404.php
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
voila je bloque sur un truc depuis un moment
j'ai un petit preloader de page que voici (il marche parfaitement)
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(300);
$('#status1').fadeOut(300); // will first fade out the loading animation
$('#preloader').delay(300).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(300).css({'overflow':'visible'});
})
ensuite le html juste après <body> (dans les div, il y a en background css les images de loader)
<div id="preloader">
</div>
<div id="status">
<div id="status1"></div>
<h1>Chargement</h1>
<p><a href="" onClick="javascript:pasloader();">Afficher la page</a></p>
</div>
j'ai mis #preloader et #status en display:none; pour éviter que les utilisateurs ayant désactivé javascript ne voient le truc tourner sans que ca fadeout après le chargement de la page
Pour afficher les div ci dessus avec javascript j'ai fait juste après <body>
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
Puis j'ai fait une fonction qui cache les div au cas ou on voudrait afficher la page
<script type="text/javascript">
function pasloader(){
document.getElementByid("preloader").style.display="none";
document.getElementByid("status").style.display="none";
}
</script>
la fonction est appelée par clic
<p><a href="" onClick="javascript:pasloader();">Afficher la page</a></p>
Evidemment quand on clic on dirait que ca veux recharger la page mais ca ne cache pas les div du preloader.
je sais que ce ne doit pas être la bonne méthode, donc j'aimerais pouvoir ,sur le clic, masquer / supprimer les div et comme avec javascript, je suis plutot noob, merci d'avance de bien vouloir m'offrir la solution
voici la page de test avec les commentaire pour se repérer et tout inpage
https://www.clownroberto.com/404.php
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
A voir également:
- Cacher un preloader de page sur clic
- Comment supprimer une page sur word - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
- Cacher ses amis sur facebook - Guide
- Cacher son numéro - Guide
- Cacher conversation whatsapp - Guide
1 réponse
J'ai resolu le truc après quelques heures d'arrachage de cheveux
j'ai gardé
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
parce que je voulais un effet immédiat donc sans attendre le chargement de jquery
et ensuite comme jquery est chargé en 1 à 2 secondes j'ai fait
A la place de ca
<p><a href="" onClick="javascript:pasloader();">Afficher la page</a></p>
j'ai mis ca
<button>Afficher la page</button>
avec jquery lors du clic sur le button
<script type="text/javascript">
$(document).ready(function() {
$( "button" ).click(function() {
$( "#preloader" ).toggle();
$( "#status" ).toggle();
});
})
</script>
j'ai gardé
<script type="text/javascript">
document.write ('<style>#preloader { display: block; }</style>');
document.write ('<style>#status { display: block; }</style>');
</script>
parce que je voulais un effet immédiat donc sans attendre le chargement de jquery
et ensuite comme jquery est chargé en 1 à 2 secondes j'ai fait
A la place de ca
<p><a href="" onClick="javascript:pasloader();">Afficher la page</a></p>
j'ai mis ca
<button>Afficher la page</button>
avec jquery lors du clic sur le button
<script type="text/javascript">
$(document).ready(function() {
$( "button" ).click(function() {
$( "#preloader" ).toggle();
$( "#status" ).toggle();
});
})
</script>
