Logo de chargement avant téléchargement

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

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, 12h39

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, 14h17

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, 22h43

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, 09h51

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, 17h53

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, 18h20

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, 16h41

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, 21h50

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, 19h54

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, 22h23

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, 16h44

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, 03h10

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, 11h46

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, 18h45

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, 18h54

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 ^^

Logo de chargement avant téléchargement

JavaScript

Discussions similaires

Partager

Partager