chargement de page different suivant la quantité de données envoyée

Version imprimable

07/04/2009, 14h02
tiyo33

chargement de page different suivant la quantité de données envoyée

Bonjour,
je travaille sur une base de données, et certaines requêtes prennent du temps. Je souhaite afficher un message d'attente entre les deux pages web pour prévenir l'utilisateur qu'il doit patienter.
Je lance donc l'affichage de ma page avec quelque chose du genre :

Code :
<div id='loading'>
Please wait...
</div>

puis ma requete. Une fois la requete terminée, grâce à du javascript (window.onload) je fait disparaitre cette balise pour que la page s'affiche correctement.

mon problème:
Cela marche parfaitement si le message affiché est de taille conséquente (genre "please wait..." répété 1000 fois), ou si je met une image de loading avec une taille importante elle aussi. Là le message s'affiche, puis disparait lorsque la requete est finie en m'affichant correctement les résultats.
Par contre, juste avec ce petit message, pas moyen, le navigateur (Firefox ou safari principalement -je n'ai pas testé sous IE ou Opera) attend la fin de ma requète pour afficher ma page avec le message directement caché. La taille des éléments envoyés est trop petite pour lancer un affichage. Je trouve ce comportement bizare et voudrais savoir s'il n'y a pas un moyen d'y remédier.

Merci
07/04/2009, 14h20
Bovino

Je comprends pas trop là, tu veux afficher un message d'attente, mais cela t'ennuie qu'il n'y ai pas à attendre ?
07/04/2009, 14h22
Poulpynette

Citation:

Envoyé par tiyo33

(genre "please wait..." répété 1000 fois)

Je ne comprends pas bien ce point.
07/04/2009, 14h28
tiyo33

En fait, si mon message d'attente est long (ou gros en taille si vous préférez), je n'ai aucun problèmes. Mais si je met juste "Please wait..." (ce qui n'est pas important en taille), le navigateur ne m'affiche pas ce message.

@Bovino : non, il y a un temps d'attente conséquent (genre 30sec...), et j'ai remarqué que beaucoup d'utilisateur quittais le site croyant qu'il plantais. Je voudrais donc leur envoyer un message d'attente, mais pas trop gros pour ne pas tuer la bande passante.
07/04/2009, 14h47
RomainVALERI

On peut voir le code de l'affichage de ton message d'attente (qui est appelé avant ta requête si j'ai bien compris) ?

(soit dit en passant : ne serait-il pas plus simple dans ton cas d'afficher une page vierge de données, tout en lançant un traitement ajax qui récupèrerait les données tout en affichant un petit message pour faire patienter ?)
07/04/2009, 15h02
tiyo33
je passe par une fonction javascript:
Code:

1 2 3 4 5 6 7 function hideLoadingSection() { var nodeDiv=document.getElementById("loading"); if(nodeDiv){ nodeDiv.style.display='none'; } }
qui est appelé par window.onload.

J'ai pensé à de l'AJAX mais ça me demande de faire plus de modifs du code.
Je me demandais s'il n'existe pas un header spécifique pour forcer le chargement (l'affichage de la page) dés qu'une info est envoyée, aussi petite soit-elle. Sinon je peut aussi passer par du multiThreading, mais ça me complique les choses.
07/04/2009, 15h26
RomainVALERI

L'extrait que tu montres (merci de penser aux balises CODE svp ;)) correspond à la fonction qui masque ton div contenant le message d'attente : c'est plutot son affichage (enfin dans ton cas : la page qui le contient) qui nous serait utile...

Dsl pour le temps de reponse...
voici mon Html, generé par du java par mon appli:

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
this.writeln("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' " +
	    			"'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>");
	    	this.writeln("<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>");
 
	    	this.writeln("<head>");
	    	this.writeln("<meta content='text/html; charset=UTF-8' " +
	    			"http-equiv='Content-Type' />");
 
	    	String keywords    = "";
	    	String description = "";
 
			jsFiles.add("/bgee/javascript/common.js");
			cssFiles.add("/bgee/css/bgee.css");
 
		[...]
 
	    	this.writeln("<title>Bgee - " + this.htmlEntities(title) + "</title>");
	    	this.writeln("<meta content='" + description + "' name='description' />");
	    	this.writeln("<meta content='" + keywords + "' name='keywords' />");
	    	this.writeln("<meta http-equiv='Content-Style-Type' content='text/css' />");
	    	this.writeln("<meta http-equiv='Content-Script-Type' content='text/javascript' />");
	        this.writeln("<link rel='shortcut icon' type='image/x-icon' href='/bgee/images/favicon.ico' />");
	    	Iterator<String> jsIterator = jsFiles.iterator();
 
	    	this.writeln("</head>");
	    	this.writeln("<body>");
 
	    	this.writeln("<div id='bgeeMenu'>");
	        this.displayBgeeMenu();
	    	this.writeln("</div>");
 
 
	    	this.writeln("<div id='bgeeBody'>");
 
	    	this.writeln("<noscript><p class='alert'>You need to enable javascript " +
	    			"in order to see this website correctly</p></noscript>");
 
                //ICI MON DIV CACHE AU CHARGEMENT DE LA PAGE
	    	this.writeln("<div id='loading'>");
	    	this.writeln("Please wait...");
	    	this.writeln("</div>");
		}
    }

Puis une fois la requete terminé, je lance la fin de mon display avec mes résultats.
Mais ça marche bien apparement, c'est juste que si je ne lui donne pas assez de string ou une image de taille plus importante dans le <div id="loading">, il ne lance pas le display, sinon, pas de problèmes.

08/04/2009, 10h03
RomainVALERI

Heu... le code généré serait plus utile (voir règles du forum ;)) mais on va jeter un oeil... ^^

Hum ^^ tu t'es trompé tu me l'as envoyé en MP au lieu de répondre ici ;)

pour les autres :

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
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
64
65
66
 
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<title>Bgee - Details for the gene family: ENSGT:7364</title>
<meta content='Bgee is a database to compare gene expression patterns across vertebrate species, by referencing expression data from different types on anatomical and developmental ontologies, and designing homology links between these ontologies to allow cross-species comparison. This approach allows to study gene expression evolution.' name='description' />
<meta content='Bgee, gene expression, evolution, ontology, anatomy, development, evo-devo bioinformatics, evo-devo database, anatomical ontology, developmental ontology, cross species database, gene expression vertebrates, gene expression evolution' name='keywords' />
<meta name='copyright' content='Bgee copyright 2008/2009 UNIL' />
<meta http-equiv='Content-Style-Type' content='text/css' />
<meta http-equiv='Content-Script-Type' content='text/javascript' />
<link rel='shortcut icon' type='image/x-icon' href='/bgee/images/favicon.ico' />
<script type='text/javascript' src='/bgee/javascript/common.js'><!-- external javascript file --></script>
<script type='text/javascript' src='/bgee/javascript/geneFamily.js'><!-- external javascript file --></script>
<link rel='stylesheet' type='text/css' href='/bgee/css/bgee.css' />
 
</head>
<body>
<div id='bgeeBanner'>
<form method='get' action='' id='basicSearchForm'><div>
<input type='hidden' name='page' value='search' />
<input type='hidden' name='action' value='quick_search' />
<input type='hidden' name='exact_match' value='on' />
<label for='basicSearch'>Search</label>
<input type='text' name='search' id='basicSearch' />
<input type='submit' value='search' />
</div></form>
<a href='http://bgee.unil.ch/bgee/bgee' title='Bgee'><img id='bgeeBannerLogo' src='/bgee/images/bgeeBannerLogoSmall.png' alt='Bgee: a dataBase for GeneExpression Evolution' title='Bgee: a dataBase for GeneExpression Evolution' /></a>
<h1>Bgee: a dataBase for Gene Expression Evolution</h1>
</div>
<div id='bgeeMenu'>
 
<div id='menuItems'>
<ul>
<li><a href='#'>Search ∇</a><ul><li><a href='http://bgee.unil.ch/bgee/bgee' title='Basic search' class='menu'>Basic search</a></li><li><a href='?page=expression&amp;action=bgeemart' title='Search cross-species gene expression' class='menu'>Search gene expression</a></li></ul></li>
<li><a href='?page=anatomy'>Anatomy &amp; Development</a></li>
<li><a href='?page=about' title='About' class='menu'>About</a></li>
<li><a href='#'>More ∇</a><ul>
<li><a href='?page=documentation' title='General documentation' class='menu'>Documentation</a></li>
<li><a href='?page=download' title='Download area' class='menu'>Download</a></li>
 
<li><a href='?page=log' title='Connection and registration page' class='menu'>Login</a></li>
<li>
 
</li>
</ul></li>
</ul>
</div>
</div>
<div id='bgeeBody'>
<noscript><p class='alert'>You need to enable javascript in order to see this website correctly</p></noscript>
<div id="loading">
please wait...
</div>
<h1>Details for the gene family: ENSGT:7364</h1>
<div class='quickLink'><strong>Expression data: </strong><a href='#sectionGeneFamilyExpressionAnatomicalOntologyBrowsing'>Anatomical ontology browsing</a> - <strong>Miscellaneous: </strong><a href='#sectionGeneralInformation'>General information</a> - <a href='#sectionGeneList'>Gene List</a></div>
 
<div class='section' id='sectionGeneralInformation'>
<h2 class='section'><span class='sectionLink'><a class='hideContent' href='#'>Hide</a> | <a href='#'>Top</a></span>General information</h2>
<div class='content'>
<table class='information' summary='gene family general information'>
[...]
</div>
 
 
</body></html>