Cacher un preloader de page sur clic

Résolu
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
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>
0

Discussions similaires

Clic gauche fonctionne très mal
bru561 -
bru561 -

5 réponses