Logo de chargement avant téléchargement

**Ivan_34** · 14/06/2011, 16h35

Bonjour,
j'aurais besoin d'aide pour résoudre mon problème:
J'ai une page sur laquelle se trouve des liens. Lorsque l'on clique sur l'un d'entre eux un fichier est récupéré dans un premier temps sur le serveur (ce qui prend un temps non-négligeable) puis est fournit à l'utilisateur en téléchargement. On est donc toujours sur la même page au final. Pendant la seconde phase (téléchargement), l'utilisateur a la barre de progression dans son navigateur donc il sait où ca en est mais mon problème c'est que pendant la première phase rien n'indique qu'il y a chargement (à part l'icone du navigateur qui indique une activité sur le serveur). Donc j'aimerais dans un premier temps pouvoir afficher un icone de chargement sur la page qui dure toute la durée du chargement et dans un second temps faire une vraie barre de progression.

Pour le premier truc, ca se rapproche de $(document).ready() mais je sais pas si c'est adaptable à ce cas particulier là...
Pour le second, j'ai vu pas mal de scripts javascript qui faisaient des barres de chargement mais rien qui se basait dynamiquement sur l'état de chargement d'une page ou la taille d'un fichier téléchargé (sachant que je connais à l'avance la taille du fichier, je peux donc en déduire le pourcentage...)
Merci de votre aide

**javatwister** · 16/06/2011, 11h39

salut

sans code un peu plus précis, j'aurais tendance à dire que quand tu activez ton lien

On est donc toujours sur la même page au final.

cette affirmation devient fausse...
donc, bye bye le contrôle client;

**Ivan_34** · 17/06/2011, 13h17

Alors comme je ne peux pas montrer ici le cas concret j'ai reproduit un exemple bidon de ce que je fais ici: http://findit.no-ip.org/test/
On clique sur le lien, celui se charge (en réalité c'est un sleep de 5sec mais c'est pour simuler le chargement) et une fois qu'il est chargé, le téléchargement débute.
On voit donc bien qu'au final, on est tjs sur la même page et qu'on a encore le contrôle dessus (on peut recliquer sur le lien si on veut). Enfin, je dis peut-être une bêtise mais c'est ce qu'il me semble...
Plus j'y pense et plus je me dis que l'AJAX peut me sortir de là donc je suis en train de m'y mettre, on verra ce que ca donnera...

**nadox** · 18/06/2011, 21h43

Bonjour,

Je ne vois pas la moindre ligne de javascript dans l'exemple fourni...

Afficher une image de chargement lors du click est assez trivial en fait...

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<script type="text/javascript">
function displayLoadImg(container){
    container.innerHTML = '<img src="/loading.gif" alt="loading"/ >';
}
</script>
</head>
<body>
<a href="/traitement" onclick="displayLoadImg(this);"</a>
</body>
</html>

Par contre une barre de progression c'est effectivement plus complexe, puisqu'il faut demander au serveur où il en est de son traitement à intervalle régulier (toutes les 500 ms par exemple...) et que effectivement, là il te faudra de l'Ajax pour faire ça.

Je me pose toutefois la question de l'utilité de déployer de l'Ajax pour si peu... ton traitement est vraiment si long que ça ?

**Ivan_34** · 20/06/2011, 08h51

Oui il n'y a pas de javascript ici parceque j'ai voulu bien représenter ce qu'était mon problème à la base.
En effet, démarrer une animation n'est pas du tout un problème ^^ C'est de savoir où en est le chargement qui en est plus un. Et oui ce chargement est suffisamment long pour justifier de développer ca

Je suis donc en train d'étudier l'ajax pour résoudre mon pb par ce biais.

**Ivan_34** · 21/06/2011, 16h53

J'ai donc finalement réussit ma première étape en utilisant bien du AJAX. Voilà ce que je fais mais c'est propre à mon code donc si quelqu'un tombe dessus et veut l'utiliser, il faut l'adapter:

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
 
function loadBar(value){
	var xhr = getXMLHttpRequest();
	var loader = document.getElementById("lB"+value);
	var file = document.getElementById("file"+value).href;
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			response = xhr.responseText;
			loader.style.display = "none";	
			document.location.href=response;
		}
		else
			loader.style.display = "inline";
	}
	if (file.indexOf('?') != -1)
		file = file + "&ajax=True";
	else
		file = file + "?ajax=True";	
	xhr.open("GET",file,true);
	xhr.setRequestHeader("Cache-Control","no-cache");
	xhr.send(null);
}

Code :

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

<a href="/get/{{ value }}" id="file{{ value }}" onclick="loadBar('{{ value }}');return false;">{{ value }}</a> <img src="/media/images/zoomloader.gif" alt="loading..."  id="lB{{ value }}" style="vertical-align:middle;display:none;"/>

Maintenant pour la 2e étape, il faut que j'arrive à agir durant l'étape 3 en ajax et je sais pas vraiment si c'est faisable... Je peux faire une fonction côté serveur qui renvoit la taille du fichier qui est en train d'être chargé toutes les secondes mais je vois pas comment faire une 2e requête au serveur pendant cette étape 3...

**nadox** · 21/06/2011, 17h20

Bonjour, il faut utiliser la fonction setTimeout pour faire une boucle sur les requêtes pour récupérer l'état du traitement, et afficher l'image correspondante.

Logo de chargement avant téléchargement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager