Insérer un "loader" dans une page et /ou un compteur d'octets

Bonjour

J'ai une page HTML locale qui "charge" sur le net des images météo. Les images se chargent l'une au dessus de l'autre et un script me permet de les rendre visibles l'une après l'autre avec la roulette de ma souris.
Je cherche si il est possible d'insérer un "loader" qui m'indiquerai où en est le téléchargement de l'ensemble des images tout en pouvant compulser les images déjà chargées.
D'autre part il me serait très utiles de connaitre le poids de la page téléchargée étant donné que les images et leurs nombres sont toujours différents. J'ai une connexion 3/4G avec un volume de data limité. (Ce pourrait être à défaut,une extension de chrome ou encore un programme pour Windows, mais je n'ai rien trouvé)
Avez-vous des infos sur un "loader" et/ou un compteur d'octets ?
Merci

Pour le loader, tu peux en trouver plein des tout fait. Par exemple http://blog.site-web-creation.net/jquery-loader/
Pour savoir le poids d'une page, tu peux simplement utiliser le debugger chrome (en appuyant sur F12) dans l'onglet réseau

Oui, il existe beaucoup de très joli "loader" sur la toile. Le problème est de savoir comment l'utiliser dans les conditions que je cite dans mon message précédent.
Le F12 sur Chrome, ok mais ou puis-je voir le poids de la page ?

Ne pourrait on pas utiliser ceci : Document.readyState ?
J'ai fait quelques test, mais je reçois un "complete" avant que les images ne soient chargées...

Salut,

Le problème c'est que ta page se charge en deux temps : tout d'abord la page elle-même (les balises, le script, le css...) et ensuite les images lorsque tu cliques sur le bouton "Go" or j'ai l'impression que les loaders se préoccupent de la page entière et se déclenchent au chargement donc ça risque de ne pas te convenir... (par exemple dans le lien indiqué ci-dessus il est bien dit "Pour en revenir à notre loader de page, ce dernier se « contentera » de détecter les images présentes dans la page dans une balise image img ." mais comme déjà dit dans ton cas il n'y a pas d'images au début car elles sont chargées seulement quand tu cliques sur le bouton "Go"...).

J'ai l'impression qu'ils se basent sur l’événement onload... Dans ton cas je pense que tu pourrais utiliser cela pour chaque image ainsi tu saurais quelles sont les images qui sont chargées... Tu pourrais alors afficher "image n°x chargée" et tu pourrais par calcule obtenir le pourcentage...

Pour la page elle-même de toute façon tu la charges hors connexion donc cela ne devrait pas poser problème...

Pour le nombre d'octets c'est surtout celui de l'ensemble des images qui t'intéresse normalement et tu peux le connaitre une fois que tu enregistres la page en faisant Ctrl + S...

Je ne sais pas si tu vois ce que je veux dire...

Ta réflexion est très pertinente. Et qu'effectivement dans les tests que j'ai pu faire le loader fonctionne au chargement de la page, mais pas lorsque l'on clique sur GO. Un loader sur chaque image ? As-tu une idée derrière la tête ?

Oui en utilisant l’événement onload sur un élément (comme une image) on peut savoir quand le chargement est terminé... C'est tout ou rien apparemment, soit chargée soit pas chargée, on n'a pas d'intermédiaire genre "chargée à x%"...

C'est de toute façon comme ça que cela semble fonctionner avec le loader indiqué ci-dessus :

Citation:

---

Le Javascript et les navigateurs comportent certaines limites quant à la détection de la progression du chargement à la différence par exemple de Adobe Flash qui sait précisément où en est la progression du chargement dans son ensemble. Le Javascript ne pourra détecter que les éléments chargés totalement au fur et à mesure.

---

Voici un essai : http://jsbin.com/cexacawowa/edit?html,output

J'ai mis plusieurs infos (c'est marrant de voir dans la "Liste des images chargées :" que les images ne sont pas forcément affichées dans l'ordre de leur numéro)...

A toi de prendre ce qui t’intéresse...

Dis-moi si cela fonctionne avec une connexion lente (car j'en ai pas...).

Oui le onload sur chaque image est la bonne piste à suivre. Tu peux créer un tableau des images à télécharger et tu fais une boucle (par exemple tous les dixième de secondes) sur le tableau pour consulter l'état "onload" de chaque image. Ensuite tu l'utilise suivant ton besoin. C'est une technique couramment employée si l'on veut par exemple attendre le temps nécessaire au téléchargement de plusieurs photos pour afficher onclick une nouvelle série de photos (indispensable pour faire un fondu par exemple).

Merci et +1 pour la confirmation !

J'ai modifié le code du message précédent, j'ai voulu afficher le nombre (pourcentage) au milieu de la bar de progression mais je n'y arrive pas vraiment...

Mais sinon ça a l'air de fonctionner : pour tester il faut décocher la case "travail hors connexion" et cliquer sur le bouton "GO" ensuite on peut faire défiler les images soit en passant la souris sur les heures soit en utilisant la roulette de la souris sur les images...

L'objet input date marche bien sur Chrome pas ff...

Citation:

---

Envoyé par Beginner.

...
J'ai modifié le code du message précédent, j'ai voulu afficher le nombre (pourcentage) au milieu de la bar de progression mais je n'y arrive pas vraiment...

---

Actuellement le nombre (pourcentage) s'affiche au milieu de la bar de progression bleue et non au milieu du cadre contenant la bar bleue mais bon ce n'est pas trop mal quand même...

En changeant la date (facilement faisable sur Chrome qui gère bien le input date) on obtient différents pourcentages, ça permet de tester, par exemple pour les anciennes images le chargement est parfois plus lent ce qui m'a permis de voir la progression de la bar...

Autant il est "facile" de suivre l'upload (vers le serveur) d'un fichier et calculer la progression, le temps restant etc. autant concernant le téléchargement (depuis le serveur), je ne sais pas s'il existe une solution autre qu'en passant par une boite de téléchargement. D'ailleurs c'est ce que semble dire ta première citation.
Après je ne me suis pas vraiment intéressé à la question du téléchargement en profondeur (le status onload suffisait pour mes besoins) donc je peux pas être catégorique. Mais (une idée en passant) si on connait le poids de chaque fichier, on peut déduire ce poids du poids total dès qu'un fichier est téléchargé (onload) et donc donner un pourcentage restant qui a défaut d'être continu et progressif, pourra être par paliers.

Voilà qui va m'aider sérieusement. J'y trouve mon bonheur. Ca fonctionne très bien pour mon usage. Si on voulait "pinailler" on aimerai que le loader indique 100% si toutes les images "disponibles" sont téléchargées. En début de journée, les dernières images ne sont pas encore disponibles, et donc le pourcentage reste en dessous de 100%. D'un autre coté ce n'est pas plus mal non plus....
Par contre (Beginner comprendra ce dont il s'agit) dans mes versions consorzio lamma, le nombre d'images est variable... Faut que je regarde de plus près.
Merci pour ces belles pistes, et plus que des pistes, des solutions :P

Merci ABCIWEB...

@plefever : Pour les deux problèmes que tu évoques il suffit d'ajouter une variable contenant le nombre total d'image (dans l’exemple c'était 24 mais cela peut-être un autre nombre). Après la difficulté c'est de savoir justement quel est le nombre total d'image disponible, y a-t-il une règle suivie régulièrement ? Du genre à telle heure il y a tant d'images disponibles ?

C'est vrai que j'ai deux autres pages ou il y a une variable nombre image, mais effectivement connue. Donc je devrai pouvoir l'adapter.
Le petit bémol est, lorsque j'enregistre la page pour la consulter hors connexion, le pourcentage s'enregistre aussi et reste même si je consulte une autre donnée hors connexion. Ex j'ai enregistré 24 images de données Corse/Vent puis 19 images de données Corse/Vagues. Lorsque j'ouvre ma page hors connexion, il reste affiché 19 images /24 quelques soient les données que je consulte. Le top serait qu'il affiche le nombre d'images enregistrées pour chaque données et que ce nombre soit rappelé en changeant Vent ou Vagues. Mais bon, là on frise le luxe :lol:

Oui mais tu peux tout effacer (initialiser) au chargement de la page, par exemple en rajoutant à la fin de la fonction initInputonload() ceci :

Code:

---

1 2 3 4

document.getElementById("imagesLoaded").innerHTML = ""; document.getElementById("pourcentage").innerHTML = "" ; document.getElementById("progressBarb").style.width = 0 + "%"; document.getElementById("progressBarb").innerHTML = "";

---

Citation:

---

Envoyé par plefever

Le top serait qu'il affiche le nombre d'images enregistrées pour chaque données et que ce nombre soit rappelé en changeant Vent ou Vagues. Mais bon, là on frise le luxe :lol:

---

Le problème c'est où stocker les données, je crois qu'on peut utiliser les cookies en JS mais je ne m'y connais pas... Ou peut-être qu'on pourrait ajouter un paragraphe ou une div invisible dans lequel on écrirait les données, reste à voir si le contenu de ce paragraphe sera enregistré lorsque l'on fait Ctrl+S (je pense que oui puisque c'est le cas avec le pourcentage)...

Mais comment savoir si l'utilisateur a bien enregistré la page en faisant Ctrl+S ? Comment détecter cela ? C'est ça le problème ! Ce serait bien si on pouvait lancer l'enregistrement depuis le code en cliquant sur un bouton !

A moins que tu fasses cela toi-même : quand tu enregistres la page en faisant Ctrl+S tu l'indiques au "code" par exemple en cliquant sur un bouton... Ou bien tu enregistres ces données à chaque fois que tu cliques sur "Go" mais là il faudra systématiquement enregistrer la page après avoir cliqué sur "GO" car autrement les infos enregistrées seront erronées...

J'ai rajouté les 4 lignes que tu suggères et ça fonctionne bien. C'est plus "propre" comme ça :)
Pour ce qui est de savoir quelles sont les images chargées et quel nombre, je laisse comme ça. Je chercherai peut être plus tard.... mais il me faudra du temps, le morceau n'est pas évident.
Merci beaucoup pour votre aide.
J'ai découvert ce forum il y a quelques temps, en cherchant des réponses à mes problèmes. Non seulement c'est une mine de renseignements, mais en plus on "croise" des gens compétants et plein de ressources :D

Citation:

---

Envoyé par plefever

Pour ce qui est de savoir quelles sont les images chargées et quel nombre, je laisse comme ça. Je chercherai peut être plus tard.... mais il me faudra du temps, le morceau n'est pas évident.

---

C'est faisable en faisant une des deux choses dont je t'ai parlées :

Citation:

---

A moins que tu fasses cela toi-même : quand tu enregistres la page en faisant Ctrl+S tu l'indiques au "code" par exemple en cliquant sur un bouton... Ou bien tu enregistres ces données à chaque fois que tu cliques sur "Go" mais là il faudra systématiquement enregistrer la page après avoir cliqué sur "GO" car autrement les infos enregistrées seront erronées...

---

Oui car une fois que le "code" sait que tu as enregistré la page c'est possible de stoker les infos concernant ce qui a été sauvegardé.

Par exemple comme tu as dit : j'enregistre 24 images de données Corse/Vent puis 19 images de données Corse/Vagues...

Eh bien après le premier enregistrement on peut écrire dans une div par exemple :

Enregistrement 1 : para: "Corse-Vent"; nbrImages : 24 ; pourcentage : 24/24 ; (Tu peux aussi ajouter la liste des images).

Et après le deuxième enregistrement on aurait :

Enregistrement 1 : para: "Corse-Vent"; nbrImages : 24 ; pourcentage : 24/24 ;
Enregistrement 2 : para: "Corse/Vagues"; nbrImages : 19 ; pourcentage : 19/24 ;

Après hors connexion, quand tu choisis tes paramètres, on affiche ce qu'il y a de disponible d’après les infos ci-dessus...

Citation:

---

Envoyé par plefever

J'ai découvert ce forum il y a quelques temps, en cherchant des réponses à mes problèmes. Non seulement c'est une mine de renseignements, mais en plus on "croise" des gens compétants et plein de ressources

---

Tant mieux et n’oublie pas que tu peux suivre la formation dont je t'ai parlée, ce n'est pas contraignant et toi qui aime apprendre cela devrait t'intéresser, je suis moi-même cette formation...

Et bien voilà les objectifs pour la saison prochaine ;)
Je pense que je vais naviguer cette saison avec ces versions-ci, c'est un énorme plus par rapport à ce que j'avais avant.
Je vais pouvoir tester tout ça bien à fond.
Je cogite déjà à la version suivante...
Apprendre reste la plus belle des choses

Citation:

---

Envoyé par Beginner.

Merci ABCIWEB...

@plefever : Pour les deux problèmes que tu évoques il suffit d'ajouter une variable contenant le nombre total d'image (dans l’exemple c'était 24 mais cela peut-être un autre nombre). Après la difficulté c'est de savoir justement quel est le nombre total d'image disponible, y a-t-il une règle suivie régulièrement ? Du genre à telle heure il y a tant d'images disponibles ?

---

J'ai suivit tes conseils et j'ai ajouté une variable suivant le nombre d'image. Ca marche très bien. J'ai donc un loader visuel (une ligne de largeur 100%) et un compteur d'image (très pratique, on voit le nombre défiler au fur et à mesure du chargement)

Si je pouvais en plus compter les octets qui se charges ce serait top.

Merci pour les bons conseils

Salut,

Pour connaitre le nombre d'octets c'est surtout celui de l'ensemble des images qui t'intéresse normalement et tu peux le connaitre une fois que tu enregistres la page en faisant Ctrl + S...

Mais si ce que tu veux c'est afficher en live le nombre d’octets qui se charge alors je ne sais pas si c'est faisable... Comme je disais, je crois (à confirmer ou corriger) qu'avec onload c'est tout ou rien, soit chargée soit pas chargée, on n'a pas d'intermédiaire genre "chargée à x%"...

Il y a peut-être d'autres techniques pour cela...

Salut,

Pas mieux que Beginner. Je ne sais pas si cela existe, jamais entendu parlé en tous cas, mais j'ai pas non plus cherché tous azimuts étant donné que le onload me suffisait... T'as pas trouvé d'autres infos ou embryons de solution sur le web ?

Non, je n'ai rien trouvé. Mais ça me parait étrange que l'on ne puisse pas y arriver... Je continue de chercher..

Si tu trouves, fais-le nous savoir...

Bien sur, je n'y manquerai pas