[Résolu]Une barre de progression

[ecatomb]

Bonjour,

Sur mon site, j'ai une page qui contient 4 gros fichiers:

- 2 fichiers javascript de 150ko et de 550ko

- 2 images de 150ko et de 400ko

Ces fichiers sont ensuite utilisé pour afficher tout plein de chose sur cette page.

J'aimerais avoir une barre de progression s'affichant pendant le chargement de ces fichiers (genre "3 fichiers sur 4 téléchargés") pour faire patienter.

Est-ce possible? A la limite, un message qui s'affiche pendant le chargement suffira (mais ça, j'ai peut être trouvé)

Merci d'avance

ps: j'ai fait quelques recherches sous google, mais c'est galère pour trouver quelque chose de spécifique en programmation ...

[BreizFenrir]

Pour les fichiers Javascript, c'est pas dit que ça soit possible. En tout cas je ne vois pas comment on pourrait faire. Par contre 550ko le fichier Javascript ? Y'a quoi dedans pour qu'il soit aussi lourd ? Il est pas compressé j'imagine ? Ça devrait déjà pas mal améliorer les choses si tu utilises par exemple le YUI Compressor et que ton serveur sert le fichier GZIPpé. Bon par contre, garde une copie non compressée du fichier si tu veux pouvoir continuer à travailler dessus !

Pour ce qui est des images, tu pourrais les charger via Javascript une fois que le reste de la page l'a été. À ce moment-là il n'est pas trop difficile de faire une animation qui aide l'utilisateur à patienter. Mais là aussi, si ça n'a pas déjà été fait, pose-toi la question de savoir si tu utilises le bon format de fichier, le bon taux de compression et la bonne taille d'image pour son usage. De plus, charger les images via Javascript veut dire que ceux qui n'ont pas Javascript ne pourront pas les voir...

Donc bref, je pense que le mieux est dans le cas qui nous intéresse de contourner les problèmes que tu poses.

[ecatomb]

Pour les fichiers Javascript, c'est pas dit que ça soit possible. En tout cas je ne vois pas comment on pourrait faire. Par contre 550ko le fichier Javascript ? Y'a quoi dedans pour qu'il soit aussi lourd ? Il est pas compressé j'imagine ? Ça devrait déjà pas mal améliorer les choses si tu utilises par exemple le YUI Compressor et que ton serveur sert le fichier GZIPpé. Bon par contre, garde une copie non compressée du fichier si tu veux pouvoir continuer à travailler dessus !

Pour ce qui est des images, tu pourrais les charger via Javascript une fois que le reste de la page l'a été. À ce moment-là il n'est pas trop difficile de faire une animation qui aide l'utilisateur à patienter. Mais là aussi, si ça n'a pas déjà été fait, pose-toi la question de savoir si tu utilises le bon format de fichier, le bon taux de compression et la bonne taille d'image pour son usage. De plus, charger les images via Javascript veut dire que ceux qui n'ont pas Javascript ne pourront pas les voir...

Donc bref, je pense que le mieux est dans le cas qui nous intéresse de contourner les problèmes que tu poses.

Merci,

C'est vrai que le fichier javascript est gros, mais je l'ai déjà réduit un peu (50ko en moins en virant les espaces, 150ko en moins en l'optimisant). Tout comme celui de 150ko, il contient des info pour afficher à l'écran les informations des skills d'un MMO. Il fait 5732 lignes et contient surtout du texte, c'est pour ça qu'il est si gros.

Il n'est pas compressé, donc je vais regarder si YUI Compressor peut marcher sur mon serveur. Merci pour le lien.

Pour les images:

- celle de 400ko est du png (pour la transparence) de 1950*450px, je ne gagnerais pas assez à la passer en jpg (la transparence me permet de changer le fond du site sans me soucier de cette image)

- celle de 150ko est du jpg de 1312*288px (avec une qualité pas très élevée)

Elles ont une résolution importante pour éviter de faire des chargements lorsque je doit afficher une autre image. C'est plusieurs images collées les unes aux autres et j'utilise une astuce du CSS pour n'en afficher qu'une seule partie (la même qui est utilisée pour faire des menu en css).

C'est pas idiot de les charger via javascript pour savoir où j'en suis.

En tout cas, si j'arrive à utiliser YUI Compressor, ça sera déjà un gros plus.

ps: en attendant, j'ai trouvé le moyen d'afficher ça pendant que la page se charge

Il faut que je teste dans les conditions réelles pour voir si ça fonction correctement sous FF et IE (je n'ai testé qu'en local avec konqueror )

Si ça marche, je posterais ici la méthode que j'ai utilisé.

[ecatomb]

Il n'est pas compressé, donc je vais regarder si YUI Compressor peut marcher sur mon serveur. Merci pour le lien.

Bon j'ai testé, résultat ... j'ai gagné 10ko :(

Par contre je n'ai pas trouvé comment faire pour utiliser des fichiers GZIPpé sur le serveur. Plus exactement, j'ai trouvé tout et n'importe quoi avec google mais rien qui explique clairement comment faire.

En tout cas, si je compresse le fichier js avec gzip sous ubuntu il fait moins de 40ko donc ça serait génial si j'arrivais à le faire.

Je me demande s'il ne suffit pas de compresser le fichier sans changer son nom?

Quand à l'astuce pour afficher une barre de progression que j'ai mis plus bas, ça ne marche que pour les images ... Il faut attendre que les fichiers js soit téléchargé pour que ça s'affiche

Merci d'avance pour ton aide

[Edit]Je crois que j'ai enfin trouvé un truc assez clair. Il suffit juste de compresser le fichier avec gzip en rajoutant l'extension .gz ? C'est bien tout ce qu'il y a à faire et ça marcherais aussi pour les autres fichiers (css, html, php - pour le dernier je me pose la question) ?

[fabien29200]

Normalement non.

Tu dois laisser tes fichiers tels quels. Et c'est au niveau du serveur Web (Apache ?) que tu actives la compression.

Ensuite, lorsqu'une personne arrive sur la page, le client (navigateur Web) envoie au serveur dans la requête HTTP s'il supporte la compression et si oui, quelle compression. Si la compression a été activée sur le serveur dans un format supporté par le client, il compresse les fichiers dans un format compréhensible par le client.

Tout ceci est transparent aussi bien pour toi que pour les gens qui vont venir sur ton site.

Un petit lien : http://betterexplained.com/articles/how-to...ip-compression/

[ecatomb]

Normalement non.

Tu dois laisser tes fichiers tels quels. Et c'est au niveau du serveur Web (Apache ?) que tu actives la compression.

Ensuite, lorsqu'une personne arrive sur la page, le client (navigateur Web) envoie au serveur dans la requête HTTP s'il supporte la compression et si oui, quelle compression. Si la compression a été activée sur le serveur dans un format supporté par le client, il compresse les fichiers dans un format compréhensible par le client.

Tout ceci est transparent aussi bien pour toi que pour les gens qui vont venir sur ton site.

Un petit lien : http://betterexplained.com/articles/how-to...ip-compression/

Merci, ça marche. Maintenant, mon site est tout beau (même s'il n'a pas fini de tout charger) et plus rapide.

Par contre, comme je ne pouvais pas modifier le fichier ".htaccess" à la racine du site, j'en ai simplement créé un dans le répertoire où sont les scripts avec uniquement le contenu suivant:

# compress all text & html:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Or, compress certain file types by extension:
<Files *.js>
SetOutputFilter DEFLATE
</Files>

C'était "<Files *.html>" dans le site que tu m'as indiqué et ça ne marchais pas. Une fois modifié en *.js ça marche très bien (vérifié avec l'add-on "Web Developer Toolbar" pour firefox).

Quand à la barre de progression, voici ce que j'ai fait:

	<table style="text-align: center;" id="temporaire">
	<tbody>
		<tr style="width: 300px;">
			<td id="chargement">
			  <div style="display: none;" id="javaactive">Chargement en cours ... Veuillez patienter.<br /><br /><img src="./image/loading.gif" alt="loading" /></div>
			  <noscript><div>Le javascript doit être activé pour afficher cette page</div></noscript>
			</td>
		</tr>
	</tbody>
</table>

Et voici ce qu'il y a à la fin de la page juste avant </body>

<script type="text/javascript">
//affiche "Chargement en cours ..." si le javascript est activé, sinon ça reste caché et le navigateur affichera "Le javascript doit être activé pour afficher cette page"
//S'exécute pendant le chargement des images et avant le chargement du fichier *.js (qui doit être indiqué après)
document.getElementById('javaactive').style.display="block";
</script>
<script type="text/javascript" src="./mon-script-tres-gros.js">
</script>
<script type="text/javascript">
window.onload = function() {
//on cache "Chargement en cours ..."
document.getElementById('temporaire').style.display="none";
//on affiche la page, le window.onload ne l'execute que quand tout est chargé
document.getElementById('definitif').style.visibility="visible";
//la fonction à lancer une fois la page chargée
debut();
}
</script>