Sablier pendant le chargement d'une page

Version imprimable

16/04/2012, 22h08
daydream123

Sablier pendant le chargement d'une page
Bonjour à tous,
J'ai le code suivant:
Code:

1 2 <input type="button" name="lien1" value="nom du lien" onclick="document.getElementsByTagName('body')[0].style.cursor = 'wait';">
Mais quand je clique dessus, rien ne se passe...
En fait, ce que je veux c'est faire un sablier si jamais une page prend longtemps à se charger. Et là, j'ai voulu tester sur un clic d'un bouton. Pourquoi cela n'a aucun effet?

Chez moi ça fonctionne bien (sous chrome) par contre ça ne fonctionne que si ma souris est SUR le body autrement elle à l'apparence lié à l'élément sur lequel elle se trouve.

Pour palier à ce problème tu peux faire une règle css disant que tous tes éléments auront le même curseur que l'élément parent par défaut (donc le "body" si tu n'as rien défini d'autre en principe) grâce à *{cursor:inherit;} comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 <html> <head> <style type="text/css"> *{cursor:inherit;} </style> </head> <body> <input type="button" name="lien1" value="nom du lien" onclick="document.getElementsByTagName('body')[0].style.cursor = 'wait';"> </body> </html>

17/04/2012, 09h07
daydream123

Je suis sur Mozilla FireFox et effectivement ça marche mais pas sur toute la page. Malheureusement le *{cursor:inherit;} ne résout pas le problème.
17/04/2012, 09h18
daydream123

Mais ça c'est pas grave, puisque là où je veux l'implémenter le body prend toute la page. Par contre, ce que j'ai remarqué c'est que mon curseur ne change en sablier qu'à la fin du traitement, et reste ensuite sous forme de sablier.
17/04/2012, 10h39
Willpower

Code:

body{width:100%;height:100%;}

à la fin du traitement ? quel traitement ? et si tu places le changement de curseur AVANT le traitement dans tes instructions de code ?
17/04/2012, 10h54
daydream123

Ben en fait je veux le faire pendant le chargement de la page, et qu'une fois la page chargée, le curseur redevient normal.
Merci pour le css ça marche :ccool:

Citation:

Envoyé par daydream123

Ben en fait je veux le faire pendant le chargement de la page, et qu'une fois la page chargée, le curseur redevient normal.
Merci pour le css ça marche :ccool:

dans ce cas:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
	<head>
		<style type="text/css">
                        *{cursor:inherit;}
                        body{cursor:wait;}
                </style>
		<script type="text/javascript">
                        document.body.onload = function(){
                                this.style.cursor = 'default';
                        };
                </script>
	</head>
	<body>
		...
	</body>
</html>

18/04/2012, 08h13
daydream123

Merci beaucoup!