plugin Corner. Latence CSS au chargement de la page php

**renaud26** · 16/06/2010, 12h12

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.

**Mohicane** · 16/06/2010, 12h23

Tu pourrais par exemple appliquer les modification sur un div invisible et le rendre visible ensuite?

**devyan** · 16/06/2010, 12h27

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

**renaud26** · 16/06/2010, 12h40

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.

**Mohicane** · 16/06/2010, 12h44

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

Code :

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

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>

**SpaceFrog** · 16/06/2010, 12h51

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

**renaud26** · 16/06/2010, 14h33

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

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
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>

**danielhagnoul** · 16/06/2010, 22h34

Bonsoir.

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 :

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
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 :

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

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.

**devyan** · 16/06/2010, 15h37

Envoyé par Mohicane

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

Code :

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

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

**SpaceFrog** · 16/06/2010, 15h41

Tu peux essayer

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
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>

**Mohicane** · 16/06/2010, 15h52

Oui, je suis d'accord pour le coup. Ta phrase manquait juste de précision sur le moment.

plugin Corner. Latence CSS au chargement de la page php

jQuery

Vue hybride

Discussions similaires

Partager

Partager