Changer apparence pointeur souris chargement

**RyzenOC** · 14/07/2014, 10h28

Bonjour, peut on changer l'apparence du pointeur de souris de chargement en JavaScript ?

Voici mon code actuel qui change le curseur de al souris au bout de 5 seconde, je souhaite le changer quand la page est chargée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html style="height:100%;width:100%" >
<head>
    <meta charset=utf-8 />
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <script type="text/javascript" >
        $('html').css('cursor','url(http://www.w3schools.com/cssref/smiley.gif), url(http://www.w3schools.com/cssref/myBall.cur), wait');
        $( document ).ready(function() {
            setTimeout(function(){
                $('html').css('cursor','default');
            }, 5000);
        });
    </script>
</body>
</html>

Voila ce que j'ai tentée (sa ne marche pas)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("img").one("load", function() {
  // changer le curseur quand tout est chargé
}).each(function() {
  if(this.complete) $(this).load();
});

Merci d'avance.

**sekaijin** · 14/07/2014, 12h45

il suffit de choisir la bonne classe css
http://www.w3schools.com/cssref/pr_class_cursor.asp
A+JYT

**iakou** · 14/07/2014, 16h41

Le + simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body style="cursor: crosshair;">

Si vous voulez ensuite le modifier au survol d'une zone, cela nécessitera un zeste de javascript...

**sekaijin** · 14/07/2014, 18h03

Non les bonnes pratiques c'est de passer par une classe
et d'attribuer la class à l'objet désiré (soit en html soit en js)

les attributs de style ça marche mais c'est pas propre.

A+JYT

**kaari kosaku** · 14/07/2014, 20h25

Envoyé par iakou

Le + simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body style="cursor: crosshair;">

Si vous voulez ensuite le modifier au survol d'une zone, cela nécessitera un zeste de javascript...

Pas sûr...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
:hover {
cursor: crosshair;
}

**RyzenOC** · 14/07/2014, 21h00

Je vous explique un peu plus, voila mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script type="text/javascript" >
        $('html').css('cursor','url(http://www.w3schools.com/cssref/smiley.gif), url(http://www.w3schools.com/cssref/myBall.cur), wait');
        $( document ).ready(function() {
            setTimeout(function(){
                $('html').css('cursor','default');
            }, 5000);
        });
    </script>

J'aimerais virer mon setTimeout par un truc du style "if document loading"

**iakou** · 14/07/2014, 21h07

Enlevez tout ce qui concerne le setTimeout et laissez uniquement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('html').css('cursor','default');

**Spartacusply** · 15/07/2014, 02h09

Mettre par défaut le style du cursor sur le body à wait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body {
       cursor : wait;
}

Dans un fichier qui se situe tout en bas de page, qui sera inséré juste avant la fermeture du body, écrire cette ligne pour repasser la valeur du curseur en normal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(function() {
     $('html').css('cursor','default');
});

**Bovino** · 15/07/2014, 08h57

Spartacusply, pas tout à fait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(function() {...});

n'a d'une part aucunement besoin de se trouver à la fin de la page puisque cette fonction (alias de .ready()) ne se déclenchera de toute façon que lors de l'événement DOMReady.
D'autre part, il semble que ce que souhaite sazearte est de modifier le curseur une fois la page chargée, or .ready() se déclenche dès que le DOM est prêt, donc avant que les éléments remplacés (notamment les images) ne soient chargés.
Il faut donc passer par l'événement load :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('document').on('load', function() {
     $('html').css('cursor','default');
})

**RyzenOC** · 15/07/2014, 09h41

Je suis un peu paumé la, je fais quoi donc ?,
je fais un css avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body {
cursor: url('moncurseurcur'), pointer; 
}

et je fais un fichier .js avec dedans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('document').on('load', function() {
     $('html').css('cursor','default');
})

?

D'après ce lien :
http://www.business-opportunite.org/settimeout.php
La fonction settimeout attend que la page est été complètement chargée avant de démarrer le compteur, cela est il vrai ?, si je mets un timeout de 1000, 1 seconde apres que la page se soit chargée complètement le curseur redeviendra normale.
EDIT: j'ai rien dit, c'est coté serveur pas coté client....

**iakou** · 15/07/2014, 09h56

Testez que diable !

**RyzenOC** · 15/07/2014, 16h51

Oui j'ai testée mais mon curseur persos ne revient pas en normale, pourquoi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
 <head>
 <title>Essai settimeout</title>
 
  <style>
 body {
cursor: url('loading.cur'), pointer; 
}
</style>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<SCRIPT LANGUAGE="Javascript">
$('document').on('load', function() {
     $('html').css('cursor','default');
})
 </SCRIPT>
 
</head>
 
<body>
<p> mon site </p>
</body>
 </html>

**Bovino** · 15/07/2014, 16h59

Parce que tu ne sais pas copier coller du code et que tu n'as aucune balise <document> dans ton code !

Présentation des sélecteurs.

**kaari kosaku** · 15/07/2014, 18h12

Envoyé par sazearte

EDIT: j'ai rien dit, c'est coté serveur pas coté client....

Le code JS dans la page html est exécuté par le navigateur donc c'est bien côté client...

**RyzenOC** · 15/07/2014, 19h06

Le setimeout ne commence pas après le chargement complète de la page

**Bovino** · 15/07/2014, 19h34

Tiens... je viens de voir que le code que j'ai donné (et mes sarcasmes ultérieurs) est un peu foireux !

Donc je m'automoinsse et je donne le code correct !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body{
    cursor: wait;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(window).on('load', function(){
    $('body').css('cursor', 'default');
});

Quant à setTimeout(), ça n'a aucun rapport avec le chargement de la page.

Changer apparence pointeur souris chargement

JavaScript

Discussions similaires

Partager

Partager