11548 sujets

JavaScript, DOM et API Web HTML5

Bonsoir à tous,

Pour la première fois, je viens poster un incident qui se produit sur Firefox (comme quoi rien n'est infaillible).

Voila le topo:
Je charge un rollover javascript en précisant l'url des images en absolut (avec nom de domaine).

        var last_realisations = document.getElementById('vignettes').getElementsByTagName('img');

        for (var i=0; i<last_realisations.length; i++) {
            var img = last_realisations[i];
            var a   = img.parentNode;

            //  http://mvc.monDomaine.fr/Application/images/projects/project_xxx.jpg
 

            img.normal_src  = img.src;
            img.hover_src   = 'http://monDomaine.fr/Application/images/projects/project_'+img.id+'_hover.jpg';
            a.link          = 'creations/'+img.id+'.html';
            a.onclick       = function() {clearTimeout(ctl.menu.timer);ctl.ajax.set_anchor(this.link);return false;};
            img.onmouseover = function () {this.src = this.hover_src;};
            img.onmouseout  = function () {this.src = this.normal_src;};
        }


Sur IE tout se passe bien, le rollover est instantané, seulement sous FF firebug me laisse penser qu'il refait une requête au serveur systématiquement.

Auriez-vous une explication possible et encore mieux un moyen de résoudre le problème?

PS: Si plus de détails sont nécessaires, n'hésitez pas à me les demander Smiley smile

Amis développeurs, merci à vous !!! Smiley lol [/i]
Dark$hadow a écrit :
Auriez-vous une explication possible

Une piste: en-têtes HTTP de l'image mal configurés.

Dark$hadow a écrit :
Si plus de détails sont nécessaires

En-têtes HTTP de la page et de l'image, ça serait bien. Smiley smile
Ok voici les en-têtes de la page :
upload/17384-Sans-titre.gif

et de l'image:

upload/17384-Sans-titre.gif

Tu l'auras sans doute remarqué dans les en-têtes, mais voici l'url du site en phase de conception (tu auras ainsi accès à tous les en-têtes):
mvc.pierrefevrier.fr

PS: la seule directive que j'ai précisé dans mon php.ini est celle pour masquer le type de page.

Merci pour ton aide.
Modifié par Dark$hadow (13 May 2009 - 16:30)
La deuxième image que tu as uploadé a remplacé l'autre, à priori, et en passant la seule image visible est presque illisible. Le GIF deux couleurs, c'est pas terrible pour du texte anti-aliasé.

Sur le fond, je suis allé voir le site et:

1. Je n'ai pas constaté le problème évoqué.
2. Les en-têtes HTTP sont normaux et je doute qu'il y ait un problème de mise en cache.

Tu n'aurais pas configuré Firefox (via la Web Developer Toolbar par exemple) pour ignorer le cache, par le plus grand des hasards?
Oups désolé pour les images uploadées, j'ai fait les screenshots rapidement et je ne voulais pas polluer le forum avec des images trop grosses (pensant qu'elles seraient affichées directement dans cette page). J'ai uppé deux fois la même image, quel boulet... Smiley confused

Je viens de pousser un peu plus les tests et en fait, le problème d'images retéléchargées ne se produit que quand j'arrive sur la page pour la première fois. Dès que je change de page, et que je reviens sur la page de départ contenant le rollover, les images sont bien enregistrées dans le cache, et le rollover est immédiat...

Bizarre bizarre... Smiley sweatdrop
Modifié par Dark$hadow (13 May 2009 - 21:01)
Hmm... vu qu'il n'y a pas d'en-tête Expires, Firefox considère peut-être l'image comme expirée après un certain temps par défaut. Il faudrait vérifier ce qui se passe exactement côté requêtes HTTP, en utilisant l'onglet qui va bien dans Firebug ou encore Live HTTP Headers.
Voila les entêtes d'une image "non-cachée" (et en bonne qualité s'il vous plait Smiley lol ) :
upload/17384-imageHover.gif

On vois qu'il y a 2 lignes "no-cache" dans les derniers entêtes.
Le problème viendrait-il de là?
Dark$hadow a écrit :
Voila les entêtes d'une image "non-cachée" (et en bonne qualité s'il vous plait Smiley lol ) :
upload/17384-imageHover.gif

On vois qu'il y a 2 lignes "no-cache" dans les derniers entêtes.
Le problème viendrait-il de là?

Peut-être, mais il s'agit là de la requête, pas de la réponse, et donc pas des instructions données par le serveur au navigateur (ce dernier ayant bien sûr la possibilité de ne pas les suivre, mais c'est un autre sujet).

Je ne suis pas un crack en HTTP. Ce que je constate avec quelques tests rapides, c'est que le comportement de Firefox est assez changeant dans mes tests pour le chargement de ressources théoriquement déjà en cache. Dans certains cas, avec une image déjà en cache et ayant 1) un Etag et 2) une date Expires dans le futur, l'image est demandée malgré tout. J'ai l'impression que c'est quand je rafraichis une page (Ctrl+R, ce que je fais quand Firebug a du mal à m'afficher un résultat autrement), et pas dans les cas «normaux».

Peut-être que Firefox fait des Conditional GET (il dit au serveur «envoie-moi le fichier si modifié depuis telle date»), et que le temps que le serveur renvoie une réponse HTTP 304 (fichier pas modifié, tu peux utiliser ton cache coco) ça fait une latence? Tu peux éventuellement tester avec une très lourde image (genre 1 Mo en distant) pour voir. Le téléchargement prendra pas mal de temps, tandis qu'une requête conditionnelle avec réponse 304 devrait créer une latence, mais courte.

Après, il se peut que ça n'intervienne que si tu as rechargé la page «pour tester» ou autre subtilité ou biais dans tes tests. Smiley cligne

S'il y a effectivement un problème, une solution pourrait être de configurer les en-têtes Expires.
Je te remercie pour ta réponse constructive.

Je vais me remettre aux tests en prenant en compte tes suggestions.

[EDIT] Il semblerait que le problème soit résolut...
Modifié par Dark$hadow (29 May 2009 - 22:38)