plugin Corner. Latence CSS au chargement de la page php

Version imprimable

16/06/2010, 12h12
renaud26

plugin Corner. Latence CSS au chargement de la page php

Bonjour à tous,

J'utilise la librairie jsquery corner pour créer des angles arrondis.
Le résultat est impeccable mais ma question est la suivante :

Lorsque je rafraîchis la page (php sur mon serveur local) je vois nettement que les bords du DIV sont d'abord carrés puis deviennent arrondis une demi-seconde plus tard...comme si il y avait un temps de "latence" avant que le CSS ne s'applique. Sur IE comme sur FF.

Comment éviter cela ? Avec des header PHP ? Avec un genre de preload JS ?

Merci pour pistes / conseils.
16/06/2010, 12h23
Mohicane

Tu pourrais par exemple appliquer les modification sur un div invisible et le rendre visible ensuite?
16/06/2010, 12h27
devyan

Bonjour,

Le javascript étant exécuté après chargement de la page html c'est tout à fait normal.
Tu peux éventuellement essayer de "masquer" par défaut le contenu de ta page et ne le rendre visible qu'après la transformation. (<body style="display:none"> dans le HTML généré par PHP)

devyan
16/06/2010, 12h40
renaud26

Merci à vous deux. Effectivement les soluces que vous proposez sont assez futées, je les teste et je reviens vous dire ce qu'il en est.

Le javascript n'est pas forcément lancé après le chargement du HTML. Par exemple:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<html>
	<head>
		<title>Order test</title>
	</head>
	<body>
		<script type="text/javascript">
                         alert("Avant le span");
                </script>
                <span>Chargé après l'alert</span>
	</body>
</html>

16/06/2010, 12h51
SpaceFrog

Salut voisin ;)

en effet on peut eventuellement lancer la fonction de cornerisation juste après l'instanciation de l'objet ...

Mais je suppose que ce pluggin de jquery et basé comme à l'habitude sur un className...
il faudrait modifier légèrement le pluggin pour lui passer des ids ...

Tu testes avec quel navigateur ?
Après c'est une question de temps de chargement

Euh... je ne sais pas si la question s'adresse à moi....mais là je teste avec IE.
En gros, ça donne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<head>
<style>
.arrondi{
	background-color: #ccc;
	z-index:1;
	top:15px;
	margin-left:530px;
	width: 233px;
	height:450px;
	padding: 10px;
	border: 2px solid #06C;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$('.arrondi').bg(14);
});
</script>
</head>
 
<body>
<div id="global">
    <div id="corps">
        <div id="div_arrondi" class="arrondi">Mon DIV arrondi</div>
    </div>
</div>
</body>

Citation:
Envoyé par Mohicane
Le javascript n'est pas forcément lancé après le chargement du HTML. Par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <html> <head> <title>Order test</title> </head> <body> <script type="text/javascript"> alert("Avant le span"); </script> <span>Chargé après l'alert</span> </body> </html>
Dans l'absolu c'est vrai et cela permet de modifier des morceaux de code pendant le chargement.

Par contre dans le cas qui nous intéresse ici, le javascript est utilisé pour modifier la page générée.
Nous avons donc besoin d'attendre que tous les éléments susceptibles d'être "arrondis" soient chargés. :)

devyan

Tu peux essayer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<head>
<style>
.arrondi{
	background-color: #ccc;
	z-index:1;
	top:15px;
	margin-left:530px;
	width: 233px;
	height:450px;
	padding: 10px;
	border: 2px solid #06C;
}
</style>
 
</head>
 
<body>
<div id="global">
    <div id="corps">
        <div id="div_arrondi" class="arrondi">Mon DIV arrondi</div>
        <script type="text/javascript">
           $('#div_arrondi').bg(14);
        </script>
    </div>
</div>
</body>

16/06/2010, 15h52
Mohicane

Oui, je suis d'accord pour le coup. Ta phrase manquait juste de précision sur le moment.
16/06/2010, 16h13
renaud26

A SpaceFrog : ben, en fait, en mettant le JS derrière le DIV, c'est pire : le div se charge carré et ensuite s'arrondit...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
<style>
.arrondi{
	background-color: #ccc;
	z-index:1;
	top:15px;
	margin-left:530px;
	width: 233px;
	height:450px;
	padding: 10px;
	border: 2px solid #06C;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$('.arrondi').bg(14);
$(documentbody).show();
});
</script>
</head>
 
<body style:"display:none">
<div id="global">
    <div id="corps">
        <div id="div_arrondi" class="arrondi">Mon DIV arrondi</div>
    </div>
</div>
</body>

16/06/2010, 16h47
devyan

Elle me plait bien cette solution ;)

:dehors:
16/06/2010, 16h56
renaud26

Citation:

Elle me plait bien cette solution

Ben moi aussi, au vrai. Quand je l'ai vue, je me suis dit : "y'a pas, cette grenouille de l'espace est vraiment très forte !"
-D'abord arrondir le DIV
-Ensuite afficher le body

Génial !
Sauf que IE, lui, il continue à afficher le div carré d'abord.
:?

...mais dans l'idée de SpaceFrog, ceci fonctionne mieux, bien que je trouve le temps d'affichage assez "long" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
$(window).load(function(){
$('.arrondi').bg(14);
//$(document.body).show();
document.getElementById('div_arrondi').style.display = '';
});
</script>
</head>
<body>
<div id="global">
    <div id="corps">
        <div id="div_arrondi" class="arrondi" style="display:none">
        Mon DIV arrondi
        </div>
    </div>
</div>
</body>

Bonsoir.
Citation:
Envoyé par renaud26
Euh... je ne sais pas si la question s'adresse à moi....mais là je teste avec IE.
En gros, ça donne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <head> <style> .arrondi{ background-color: #ccc; z-index:1; top:15px; margin-left:530px; width: 233px; height:450px; padding: 10px; border: 2px solid #06C; } </style> <script type="text/javascript"> $(window).load(function(){ $('.arrondi').bg(14); }); </script> </head> <body> <div id="global"> <div id="corps"> <div id="div_arrondi" class="arrondi">Mon DIV arrondi</div> </div> </div> </body>
Code:

1 2 3 4 5 <script type="text/javascript"> $(function(){ $('.arrondi').bg(14); }); </script>
L'événement window load se produit après le chargement de la page, il est donc normal de voir d'abord l'élément DOM ayant la classe arrondi non arrondi !

Tandis qu'avec $(document).ready(function(){ ...}) ; ou $(function(){ ...}) ; forme abrégée du premier, le traitement de l'arrondi se ferra avant l'affichage de la page.

17/06/2010, 08h36
SpaceFrog
Oui Daniel d'ou le code que je proposais:
Code:

1 2 3 4 <div id="div_arrondi" class="arrondi">Mon DIV arrondi</div> <script type="text/javascript"> $('#div_arrondi').bg(14); </script>
sans load ...
mais sans être sûr que jquery accepte cette syntaxe, le body n'étant pas encore integralement instancié
17/06/2010, 08h48
renaud26
Bonjour à vous,

Et bien, on dirait bien que non :
Code:

1 2 3 4 5 6 <script type="text/javascript"> $(function(){ $('.arrondi').bg(14); }); </script>
Le DIV ne s'affiche plus du tout avec cet appel de fonction.
Mais j'ai fait l'expérience de mettre ce code avec 1 seul DIV sur la page, qui ne soit pas imbriqué dans d'autres DIV, et cette latence disparaît.
Il est donc possible que ce soit le chargement des DIV parents qui pose problème (?)
17/06/2010, 10h43
SpaceFrog

la cause en est sans doute que le body n'etant pas integralement instancié, certains pointages de jquery tombent sur des elements non instanciés et en particulier les selecteurs $
17/06/2010, 19h02
renaud26
Bon, après tout c'est pas la fin du monde...
Par contre, plus ennuyeux, j'ai un formulaire dans un des DIV arrondis et, sur Internet Explorer (pas FF), le code :
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> $(window).load(function(){ $('#col_gauche').bg(14); $('#col_droite').bg(14); }); </script>
rend le POST inopérant. Le bouton submit ne fonctionne plus.
:aie:
Quelqu'un sait pourquoi ?
Merci à lui.