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

Citation:

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.

Ivan_34 · 22/06/2011, 15h41

Oui mais là je peux seulement retranscrire l'étape à laquelle je suis (1 à 5) mais pas l'évolution de la taille du fichier qui est en train de se constituer?

nadox · 23/06/2011, 20h50

Bonjour,

Il faut faire deux requêtes au départ.(lors du clic sur le lien)

L'une correspond à celle qui déclenche le traitement. Elle est unique, et permettra de garder l'utilisateur sur la page en attendant la fin du traitement. Lorsque le traitement serveur est fini, elle fait la redirection.
Elle correspond au dernier code que tu as posté.

L'autre permet de récupérer à intervalle régulier l'état d'avancement du traitement serveur et d'afficher l'image de chargement correspondante (ou un simple pourcentage). Il suffit de faire un appel récursif dans le onreadystatechange. On peut utiliser setTimeout au lieu d'un appel récursif direct afin de contrôler le délai entre chaque requête.

Voici ce que ça pourrait donner (!! code non testé !!, c'est juste pour donner le principe avec du code à 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
        function loadBar(value){
            var file = document.getElementById("file"+value).href;
            var loader = document.getElementById("lB"+value);
            getFile(value);
            checkTask(loader);
        }
        function getFile(file){
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    response = xhr.responseText;
                    document.location.href=response;
                }
            }
            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);
        }
        function checkTask(loader){
            loader.style.display = "inline";
            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    var pourcentage = xhr.responseText;
                    if (pourcentage != "100") {
                        loader.src = "loading_"+pourcentage+".jpg"; // image adaptée à l'état d'avancement courant.
                        loader.style.display = "inline";
                        setTimeout(function(){ checkTask(loader); },"1000"); // dans une seconde on redemandera l'état du traitement serveur
                    } else {
                        loader.style.display = "none";
                    }
                }
            }
            xhr.open("GET","checkTask.php",true); // page de récupération de l'avancée du traitement.
            xhr.setRequestHeader("Cache-Control","no-cache");
            xhr.send(null);
        }

Ivan_34 · 29/06/2011, 18h54

C'est exactement ca ^^ (enfin à la 5e ligne, il faut mettre file à la place de value et la ligne 32 sert pas mais sinon c'est correct

).
Je l'ai juste un petit peu adapté à mon cas et ca marche

Là il me reste plus qu'à faire la fonction côté serveur (je fais juste un random pour l'instant) mais ca ne devrait pas poser plus de problème.
Merci

Watilin · 29/06/2011, 21h23

Apparemment c'est un serveur PHP donc…
http://www.php.net/manual/fr/function.filesize.php n_n

Sinon, je suis peut-être hors sujet mais j'aimerais bien voir le code de checkTask.php

Ivan_34 · 01/07/2011, 15h44

Et non désolé, j'utilise du Django

(Framework web pour Python). C'est juste Nadox qui a mit un lien php pour l'exemple, mais bon c'est faisable dans les 2 langages ^^
En fait, je transmet à l'équivalent de checktask.php 2 parametres: l'identifiant du fichier et sa taille totale définitive (elle est ds une bdd mais je pourrais aussi la récupérer coté serveur mais c'était chiant). Du coup dans ton checktask.php, tu calcules d'abord la taille de ton fichier grace a l'identifiant (si il n'y est pas encore, tu met 0), puis tu divises par la taille totale et tu multiplie par 100 et tu renvoies ^^
Bon apres il peut y avoir pas mal de variantes mais bon ca c'est la base.

Watilin · 02/07/2011, 02h10

Citation:

Envoyé par Ivan_34

tu calcules d'abord la taille de ton fichier grace a l'identifiant

C'est ça que je pane pas. Comment tu fais pour récuperer, en JavaScript, la taille d'un fichier en cours de téléchargement ? Tu fais de la FSOrcellerie ? ^^

Ivan_34 · 04/07/2011, 10h46

Tu le fais pas en javascript (côté client) mais en php (côté serveur).
Si je dis pas de bêtises, ca doit etre un truc du genre: echo filesize ($file); mais bon je suis pas trop ds le php en ce moment dc vérifies ^^
Et pour la taille finale du fichier, elle je l'ai déjà dans une base de données en fait...

nadox · 04/07/2011, 17h45

Si tu connais déjà la taille du fichier avant de le construire, c'est qu'il ne change pas ?! Je ne comprends plus très bien ce que tu fais du coup...

Ivan_34 · 04/07/2011, 17h54

Je récupère mon fichier dans un système de cache (c'est un très gros système distribué et j'ai développé une interface web qui permet d'accéder aux fichiers que nous utilisons de manière plus ergonomique que par ligne de commande). Donc oui le fichier existe déjà mais je ne fais que le déplacer ^^

14/06/2011, 16h35	#1
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	Logo de chargement avant téléchargement 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
	00

29/06/2011, 21h23	#11
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	Apparemment c'est un serveur PHP donc… http://www.php.net/manual/fr/function.filesize.php n_n Sinon, je suis peut-être hors sujet mais j'aimerais bien voir le code de checkTask.php __________________ Disposition de clavier ergonomique française : Bépo
	00

17/06/2011, 13h17	#3
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	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...
	00

20/06/2011, 08h51	#5
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	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.
	00

21/06/2011, 17h20	#7
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	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.
	00

22/06/2011, 15h41	#8
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	Oui mais là je peux seulement retranscrire l'étape à laquelle je suis (1 à 5) mais pas l'évolution de la taille du fichier qui est en train de se constituer?
	00

29/06/2011, 18h54	#10
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	C'est exactement ca ^^ (enfin à la 5e ligne, il faut mettre file à la place de value et la ligne 32 sert pas mais sinon c'est correct ). Je l'ai juste un petit peu adapté à mon cas et ca marche Là il me reste plus qu'à faire la fonction côté serveur (je fais juste un random pour l'instant) mais ca ne devrait pas poser plus de problème. Merci
	00

01/07/2011, 15h44	#12
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	Et non désolé, j'utilise du Django (Framework web pour Python). C'est juste Nadox qui a mit un lien php pour l'exemple, mais bon c'est faisable dans les 2 langages ^^ En fait, je transmet à l'équivalent de checktask.php 2 parametres: l'identifiant du fichier et sa taille totale définitive (elle est ds une bdd mais je pourrais aussi la récupérer coté serveur mais c'était chiant). Du coup dans ton checktask.php, tu calcules d'abord la taille de ton fichier grace a l'identifiant (si il n'y est pas encore, tu met 0), puis tu divises par la taille totale et tu multiplie par 100 et tu renvoies ^^ Bon apres il peut y avoir pas mal de variantes mais bon ca c'est la base.
	00

04/07/2011, 10h46	#14
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	Tu le fais pas en javascript (côté client) mais en php (côté serveur). Si je dis pas de bêtises, ca doit etre un truc du genre: echo filesize ($file); mais bon je suis pas trop ds le php en ce moment dc vérifies ^^ Et pour la taille finale du fichier, elle je l'ai déjà dans une base de données en fait...
	00

04/07/2011, 17h45	#15
nadox Membre expérimenté Développeur Inscription : février 2010 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Développeur Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2010 Messages : 360 Points : 545 Points : 545	Si tu connais déjà la taille du fichier avant de le construire, c'est qu'il ne change pas ?! Je ne comprends plus très bien ce que tu fais du coup...
	00

04/07/2011, 17h54	#16
Ivan_34 Invité de passage Inscription : décembre 2010 Messages : 16 Détails du profil Informations forums : Inscription : décembre 2010 Messages : 16 Points : 1 Points : 1	Je récupère mon fichier dans un système de cache (c'est un très gros système distribué et j'ai développé une interface web qui permet d'accéder aux fichiers que nous utilisons de manière plus ergonomique que par ligne de commande). Donc oui le fichier existe déjà mais je ne fais que le déplacer ^^
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email