Affichage d'une image pendant un traitement javascript

Bonjour,

Je travail sur une page où les données sont en caches dans une collection JS,
je n'affiche les données que par 100.

Le tableau d'affichage des données est construit par traitement javascript.

Pour le changement de page je créer le tableau et je remplace l'ancien par le nouveau, ce qui prend un certain temps, pendant lequel j'aurais voulu afficher un gif animé pour que l'utilisateur ne s'inquiète pas.

Problème 1 : L'image n'avait pas le temps de s'afficher.
Solution : Settimeout

Code:

---

1 2 3 4 5

$('#loading').empty().html(' <img src="Images/load.gif" alt="Chargement en cours" />');   setTimeout(pageTo,10,page);   return false;

---

Problème 2 : L'image ne s'anime pas pendant le traitement.
Solution : Bah la je sèche, si JS est responsable de l'animation du Gif et qu'il est occupé par ma fonction pageTo, je ne vois pas comment faire ...

C'est bien la première fois que je vois utiliser le 3eme param de setTimeout... ta variable "page" contient la valeur correspondant au langage à utiliser ? 8O

Citation:

---

Envoyé par RomainVALERI

C'est bien la première fois que je vois utiliser le 3eme param de setTimeout... ta variable "page" contient la valeur correspondant au langage à utiliser ? 8O

---

Pour tout dire, utiliser les paramètres optionnels de setTimeout est plutôt déconseillé car ils n'ont pas la même utilité selon le navigateur.
Si effectivement, le 3e paramètre correspond au langage de script utilisé pour IE, il correspond au(x) paramètre(s) à passer à la fonction (1er paramètre) pour les autres navigateurs ;).

Mais je te rejoins dans ton analyse, je pense que le problème de aurelien.tournier vienne du fait qu'il utilise mal setTimeout :mrgreen:

Citation:

---

Envoyé par aurelien.tournier

Bonjour,

Je travail sur une page où les données sont en caches dans une collection JS,
je n'affiche les données que par 100.

Le tableau d'affichage des données est construit par traitement javascript.

Pour le changement de page je créer le tableau et je remplace l'ancien par le nouveau, ce qui prend un certain temps, pendant lequel j'aurais voulu afficher un gif animé pour que l'utilisateur ne s'inquiète pas.

Problème 1 : L'image n'avait pas le temps de s'afficher.
Solution : Settimeout

Code:

---

1 2 3 4 5

$('#loading').empty().html(' <img src="Images/load.gif" alt="Chargement en cours" />');   setTimeout(pageTo,10,page);   return false;

---

Problème 2 : L'image ne s'anime pas pendant le traitement.
Solution : Bah la je sèche, si JS est responsable de l'animation du Gif et qu'il est occupé par ma fonction pageTo, je ne vois pas comment faire ...

---

Et la génération du tableau HTML tu la fais comment ? et elle te prend combien de temps sur ton navigateur ?
Je dis ça, mais générer 400 lignes de tableau, il faut moins de 0.2s dans un JS bien optimisé.
Si tu attaques le DOM à chaque ligne de tableau ajoutée, tu auras les processus de rafraichissement du dom à chaque fois et là tu pourras dire byebye aux perfs de ta machine :)

Bonjour

Code:

---

$('#loading').empty().html(' <img src="Images/load.gif" alt="Chargement en cours" />');

---

Travail inutile, il suffit de :

Code:

---

$('#loading').html('<img src="Images/load.gif" alt="Chargement en cours" />');

---

Avec html() le contenu existant est totalement remplacé par le nouveau contenu.

Voir : http://api.jquery.com/html/

J'ai déjà constaté qu'une image animée ne devenait active qu'après la fin du script en cours. J'avais résolu le problème en divisant le code en 2 fonctions séparées. Attention, la seconde fonction ne doit pas appeler la première.