Sujet Précédent Sujet Suivant

Cacher un preloader de page sur clic

Résolu/Fermé
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - Modifié par animostab le 17/02/2014 à 17:03
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 17 févr. 2014 à 20:31
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
17 févr. 2014 à 20:31
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

Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses