Page longue à charger : afficher la progression

OTP · 12 Juillet 2008

Bonjour,

Sur la V3 de mon 3W, j'ai plusieurs pages assez lourdes. J'aimerais que se charge déjà le début de la page (tout sauf une maps GG), rapidement, ainsi qu'un indicateur qui montre le % de chargement du reste (la partie lourde, la maps), qui s'afficherai finalement une fois arrivée à 100%

Comment peut-on faire ça ?

Merci d'avance,

Michaël

Chacho · 12 Juillet 2008

Salut,

Perso, j'utilise mootools comme librairie javascript et si j'étais dans ton cas, pour charger la map seulement à la fin, j'utiliserais ( j'en ai pas eu besoin encore mais je garde ça dans ma hotte )
http://docs.mootools.net/Plugins/Assets
qui te permet de charger dynamiquement javascript, css et images.
Après pour le % je sais pas..

OTP · 12 Juillet 2008

Ca à l'air intéressant, mais je ne vois pas trop comment adapter ça à une GG maps.
(Et en plus je n'y connais rien en js).
Tu ferais ça comment ?

j-mi · 13 Juillet 2008

OTP a dit:
Ca à l'air intéressant, mais je ne vois pas trop comment adapter ça à une GG maps.
(Et en plus je n'y connais rien en js).
Tu ferais ça comment ?

dans les mods phpBB y a un script pour afficher une image durant le temps de chargement de la page

j'ai aussi un bout de js dans mes foufes
je ne sais meme pas si y a pas un post dans mon www

tu devrais t'inspirer de ce genre de menu , ainsi tu charges pas tout d'un coups
*http://dev.developpements.org/presentations-titres-services.html

prends le script

le truc c'est des appels html via ajax
c tout simple , tu a deux div a respecter
la div du contenu et la div du menu
les appels javas dans le header html , et creer des pages qui se noment article

si je suis trop zarb sur le post on peux en discuter en pv

OTP · 13 Juillet 2008

Ca ne marche pas sous FF !

j-mi · 13 Juillet 2008

OTP a dit:
Ca ne marche pas sous FF !

tu est sur ? chez moi ça marche

fais pas attention a la colone d'extreme droite, la effectivement c mort en ff

mais le reste marche sur tout normalement

OTP · 13 Juillet 2008

Ok, j'y retourne !

OTP · 13 Juillet 2008

J'ai cherché un truc plus simple et trouvé ça :

Code:

<script type="text/javascript">
onload=function(){
document.body.removeChild(document.getElementById("mess"));
}
</script>

Avec :

Code:

   <h1 id="mess">
      Veuillez patienter...
   </h1>

Mais ça ne marche que ci le h1 est juste après le body.

Comment pourrai-je modifier le code pour pouvoir placer le h1 où je veux ?

guardatak · 13 Juillet 2008

onload=function(){
document.all.mess.style.visibility = "hidden";
}

Essaie, on sait jamais

OTP · 13 Juillet 2008

Tu veux cacher quoi ?

guardatak · 13 Juillet 2008

La balise <h1>
(voir message au dessus complété)

OTP · 13 Juillet 2008

Ok.
Pas de souci à mettre des hidden avec GG qui n'aime pas ça ?

OTP · 13 Juillet 2008

Le message ne s'efface pas.

guardatak · 13 Juillet 2008

Mais si ça marche !

<script ...>
function cache()
{
document.all.mess.style.visibility = "hidden";
}
</script>

<body onload="javascript:cache();">

<h1 id="mess">TEXTE A CACHER A LA FIN DU CHARGEMENT</h1>

Une autre piste plus complète est là, je te laisse analyser le code source : http://www.easy-script.com/exemple/dhtml_as_ex1/ex.html

OTP · 13 Juillet 2008

Ah, ok, comme ça.
Je vais prendre ton script, il me va.
Merci !

OTP · 13 Juillet 2008

Je dois être un boulet, le texte reste encore en place...

guardatak · 14 Juillet 2008

Grumph, oui déso effectivement je fais toujours tout sous IE ! :lol:

Voilà la version multi, qui décoiffe !

Code:

<style type="text/css" media="all">
.cachediv{
	visibility: hidden;
	overflow: hidden;
	height: 1px;
	margin-top: -1px;
	position: absolute;
}
</style>
<script type="text/javascript">
function cache(divID)
{
	if ( document.getElementById && document.getElementById( divID ) )
	{
		Pdiv = document.getElementById( divID );
		PcH = true;
	}
	else if ( document.all && document.all[ divID ] )
	{
		Pdiv = document.all[ divID ];
		PcH = true;
	}
	else if ( document.layers && document.layers[ divID ] )
	{
		Pdiv = document.layers[ divID ];
		PcH = true;
	}
	else
	{
		PcH = false;
	}
	if ( PcH )
	{
		if(Pdiv.className == 'cachediv')
		{
			Pdiv.className = '';
		}
		else{
			Pdiv.className = 'cachediv';
		}
	}
}
</script>
<body onLoad="javascript:cache('chargement');">
	<div id="chargement">TEXTE DE CHARGEMENT</div>
</body>

OTP · 14 Juillet 2008

guardatak a dit:
Voilà la version multi, qui décoiffe !

Rho le vilain !

guardatak a dit:
Voilà la version multi, qui décoiffe !

Merci, je vais tester.

OTP · 14 Juillet 2008

Ok, ça marche, merci.