Vitesse chargement différent sous IE et FFX

**richard_sraing** · 08/05/2009, 11h34

Bonjour tout le monde.

Voilà, j'ai un site internet que j'ai réalisé, et je constate un différence notable entre l'utilisation sous IE et sous Firefox.

je m'explique.

J'ai un menu que je crée par appel à une fonction Javascript:

Code javascript :

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
29
30
31
32
33
function Menu(){
	document.write('<ul id="dropdown-menu" class="dropdown" >');
	document.write('<li><a href="./Main.asp">Accueil</a></li>');
	// bloc pour la partie clientèle
	document.write('<li><a style="display: block;">Clientèle</a>');
	document.write('<ul>');
	document.write('<li><a href="./Top.asp">Hit parade</a></li>');
	document.write('<li><a href="./CliEntry.asp">Gestion fiches clients/prospects</a></li>');
	document.write('<li><a href="./CliReport.asp">Recherche - liste détaillé clients</a></li>');
	document.write('</ul>');
	// bloc pour la partie Produits
	document.write('<li><a style="display: block;">Produits</a>');
	document.write('<ul>');
	document.write('<li><a href="./Catalogue.asp">Catalogue - liste de vente</a></li>');
	document.write('<li><a href="./ArtEntry.asp">Gestion fiches articles</a></li>');
	document.write('<li><a href="./ArtReport.asp">Recherche - liste détaillé articles</a></li>');
	document.write('</ul>');
	// bloc pour la partie Commerciaux
	document.write('<li><a style="display: block;">Commerciaux</a>');
	document.write('<ul>');
	document.write('<li><a href="./CaCom.asp">Chiffre d'+"'"+'affaire</a></li>');
	document.write('<li><a href="./OffresReport.asp">Consultation des offres</a></li>');
	document.write('</ul>');
	// bloc pour la partie Fournisseurs (Divers)
	document.write('<li><a style="display: block;">Fournisseurs</a>');
	document.write('<ul>');
	document.write('<li><a href="./FouEntry.asp">Gestion fiches fournisseurs</a></li>');
	document.write('<li><a href="./FouReport.asp">Recherche - liste détaillée fourn.</a></li>');
	document.write('</ul>');
	document.write('<li><a href="./Disconnect.asp">Déconnecter</a></li>');
	NomDossier();
	document.write('</ul>');
}

Et je remarque la chose suivante:
lorsque je charge la page avec IE, il y a comme un clignotement de l'écran.
En fait, le menu se charge, mais reste caché, et le css est appliqué seulement par après il me semble. Ce qui donne un effet comme si on construisait toute la page, et ensuite qu'on la tassait vers le dessus.

Quelqu'un aurait-il une idée de la source de ce tassement bizarre.

Voici également le css (la partie concernant le menu du moins)

Code css :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/***********************************/
/*  Partie du css réservé au menu  */
 
/* this is the main UL element*/
.dropdown{
	visibility:hidden;
	margin:0;
	padding:0;
	list-style:none;
	border-bottom:1px solid #000;
}
 
/* these are the inner menus*/
.dropdown ul{
	margin:0;
	padding:0;
	border-top:1px solid #f2f2f2;
	list-style:none;
}
 
/* these are all the LIs in the menu*/
.dropdown li{
	margin:0;
	padding:5px;
	width:120px;
	background-color:#f2f2f2;
	cursor:pointer;
}
 
/* these are anchor in the menu, if you want to style them differently from the rest of you website*/
.dropdown a{
	text-decoration:none;
	color: DarkBlue;
	width:100%;
}
 
.dropdown a:hover{
	text-decoration:underline;
}
 
/* these are the LIs that only belong to submenu*/
.dropdown ul li{
	border:1px solid #000;
	border-top:0;
	margin-left:-1px;
}
 
/* these are the LIs that contains a submenu*/
.dropdown li.submenu{
	background-image:url('expand_down.gif');
	background-position:center left;
	background-repeat:no-repeat;
	padding-left:20px;
	width:100px;
}
 
/* these are the LIs that contains a submenu and which are in a sub-menu themselve*/
.dropdown ul li.submenu{
	background-image:url('expand_right.gif');
	background-position:center right;
	padding:5px;
	width:100px;
}

voilà, je ne sais pas si cela est normal ou non, mais en tout cas, c'est dérangeant pour les utilisateurs.

Voilà, alors j'attends vos idées, remarques, ...

Merci.

p.s.: je sais que le code n'est pas des plus propres, mais pour le javascript, c'est la manière la plus simple que j'ai trouvée, et pour le css, je l'ai récupéré sur un autre site. (ici)

**devyan** · 08/05/2009, 11h51

Salut,

Comme pour les images, les fichiers externes Script et Css sont chargés après le html il me semble...

Sans le html pour savoir comment tu déclenches la construction de ton menu il est difficile de te répondre.

**richard_sraing** · 08/05/2009, 12h17

oups, j'avais oublier celui là tiens:

voilà pour l'appel du menu.

Code asp :

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

1
2
3
4
<div>
		<img src="./Images/BC-Pro.png" align="Right" alt="BC-PRO"/>
		<script LANGUAGE="javascript">Menu();</script>
	</div>

En fait, la page est en asp, je ne sais pas si ça change quelque choses.

Si tout le code permet de mieux s'y retrouver?

Code asp :

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
29
30
31
32
33
34
35
36
37
38
39
40
<!-- #INCLUDE FILE="inc/checkLogin.inc" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
  <title>Menu principal</title>
	<script type="text/javascript" src="js/mootools-for-dropdown.js"> </script>
	<script type="text/javascript" src="js/UvumiDropdown-compressed.js"> </script>
	<script type="text/javascript" src="js/testajax.js"></script>
	<link rel="stylesheet" type="text/css" media="screen" href="css/WebApp.css" />
	<script type="text/javascript">
		new UvumiDropdown('dropdown-menu');
	</script>
</head>
<body>
	<div>
		<img src="./Images/BC-Pro.png" align="Right" alt="BC-PRO"/>
		<script LANGUAGE="javascript">Menu();</script>
	</div>
	<div>
		<h3>Accueil <noscript><font size="5" face="Times" color="red">Veuillez activé le Javascript dans votre navigateur afin d'utiliser le site.</font>
	</noscript></h3>
		<h2>
		<% response.write("Bonjour " & Session("Nom"))%>
		</h2>
		<p>
		Bienvenue sur le module WEB de BC-Pro. <br/>Dans la barre ci-dessus, vous trouverez les liens vous permettant
		d'accéder aux différentes fonctionnalités du site.
		</p>
		<p>
			Voici les valeurs de l'objet session:<br/>
			<%
			response.write("Nom: " & Session("Nom") & "<br/>")
			response.write("Nom d'utilisateur: " & Session("Username") & "<br/>")
			response.write("Droits: " & Session("Rights") & "<br/>")
			%>
		</p>
	</div>
</body>
</html>

**Macmillenium** · 08/05/2009, 14h34

Bonjour,

Les menus dynamique en full JavaScript (document.write en plus

) ont été abandonnés pour la simple raison : complètement inaccessible ...
Je te conseil vivement d'aller faire un tour par là

**richard_sraing** · 08/05/2009, 14h50

Alors là...

au début le menu était même pire. Je le générait par appel à une procédure en Dataflex (langage utilisé pour le code behind).

J'avais vu (par hasard) les menu déroulant que tu proposes, mais j'avais trop la flême de le changer.

Mais si on me dit que ça pas bien, et qu'en présentant cela je me rend tout ridicule, alors, je change tout de suite.(en essayant de comprendre avant tout de même).

Je vais voir ce que cela donne...

Encore juste une question au passage.

Est ce que je pourrais placer le code qui génère le menu dans un fichier .inc (propre à l'ASP je crois), de manière à ne pas réécrire tout le menu dans chaque fichier.... Mieux ou encore pire???

**richard_sraing** · 08/05/2009, 14h59

ben voilà, ce que j'ai fait, j'ai pris le code que j'avais dans la fonction javascript pour mon menu, et je l'ai placer dans un fichier .inc (en prenant soins bien sûr de retirer tous les >> response.write(" << >> "); <<
En alors, je fais simplement :



à la place de lancer mon appel de la fonction.

Mieu ou pas?

Ce qui est tout de même bizarre, je ne remarque aucune différence au niveau du temps de chargement.
Sous FFX, l'impression est donnée que le menu ne bouge même pas, alors que sous IE, il fait toujours clignoter tout... :s

Vitesse chargement différent sous IE et FFX

CSS

Vue hybride

Discussions similaires

Partager

Partager