Cacher un preloader de page sur clic

[Résolu/Fermé]
Signaler
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
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.

1 réponse

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
683
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>