[Resol] Forcer le navigateur à recharger une image (déjà dans cache).

Coucou,

En PHP, j'ai écrit une page pour redimensionner une image et la remettre dans le fichier d'origine. Ca marche très bien.

Une fois le retaillage effectué, la page me réaffiche cette image.

Seulement, comme l'image a déjà été chargée et est déjà présente dans le cache du navigateur, l'image affichée est toujours 'avant retaillage'.

Donc je recherche un moyen de recharger l'image. Et quelque chose me dit que ce n'est possible qu'en JavaScript. Mais ça dépasse un peu mes capacités
Modifié par Borak (23 Sep 2010 - 17:20)

Salut,

Bah tu peux aussi le faire en PHP avec quelque chose du genre :

<img src="image.png?time=<?php echo time(); ?>" alt="alternative de l'image" width="100" height="30" />

Vindiou, je n'aurais jamais pensé à un truc pareil et ça marche en plus (test effectué et mis en place), merci. Pour l'instant, je garde.

Et en javascript ? Il y a une solution ? Parce que l'image est aussi affichée ailleurs sur une liste, et je ne voudrais pas forcer le réaffichage de toutes les images de la liste. Ca me parait une solution plus propre pour mon cas.
Modifié par Borak (23 Sep 2010 - 16:42)

Qu'est-ce qui te dérange au juste avec le PHP ?

Parce qu'en JS, le principe serait le même mais c'est plus bancale du fait que tu te trouves côté client (et que tu n'as donc pas forcément les pleins pouvoirs, JS pouvant être désactivé)

Ce qui me dérange, c'est que le pb est du coté navigateur. C'est le cache du navigateur qui a stocké l'image et qui la ressort pour une URL donnée.

Dans la page de retaillage, je peux changer l'adresse en ajoutant la date dans l'url, ça marche. Mais c'est une solution que je ne veux pas appliquer quand j'arrive sur la page qui affiche la liste des images, ça entrainerait le réaffichage de toutes les images ce qui pourrait être un peu long.

Si il y a une solution javascript ou PHP pour imposer le raffraichissement d'une seule image sans changer son URL, je suis preneur (en attendant, je fais avec ton astuce, car je n'ai pas mieux et je rafraichis la liste manuellement par le bouton recharger la page)

Je pourrai ajouter un width="xxx" dans le tag img, mais ça ne me va pas non plus. Le CSS indique une taille maximum aux images et je ne veux pas que ça impacte ma feuille de style.

Je sais, je suis difficile.
Modifié par Borak (23 Sep 2010 - 17:13)

Argghhhhh zut.

Bon je ne comprends plus trop, mais sur le site distant ça marche sur la page liste... ... ...
Le fait d'avoir réaffiché avec une url modifiée a bien mis à jour le cache pour l'url non modifiée ?

Bizarrement, mon test précédant, ne donnait pas le même résultat en local sur le micro.

OK, donc je garde cette solution géniale merci encore

Une petite astuce pour éviter les rechargements inutiles et accélérer l'affichage.

Problème de la solution time():
Ca fait changer le nom du fichier en cache à chaque chargement de la page, donc l'utilisateur va devoir à chaque fois attendre le chargement de toutes les images de la page, même s'il l'a déjà visitée une fois et qu'il n'y a eu aucune mise à jour depuis.

Solution, la fonction filectime() en suffixe:
<IMG src='<? echo $picture."?".filectime($picture); ?>'>
La fonction filectime retourne la date de la dernière création du fichier.
Donc tant que l'image ne change pas, le nom identique à celui en cache dans IE, et l'image s'affichera immédiatement.
Quand l'image est mise à jour, la date de création change, donc le nom comparé au cache est différent, et uniquement cette image sera rechargée!

En espérant que ça vous aidera.

Salut Brunchy.

Pas compris en quoi la fonction time contraint au rechargement de toutes les images de la page.

Si par exemple, j'ai dans ma page une image avec une query string variable et une autre sans, la seconde peut bien être mise en cache. Le seul nom qui change est celui de l'image avec la query string et il n'y a donc que cette dernière qui a à être rechargée.
Modifié par koala64 (23 Sep 2010 - 18:11)

Effectivement pour ma liste ou j'ai une boucle d'affichage des images. Si je mets un "time", comme l'url de chaque image change, il forcera le rechargement de toutes les images. Alors qu'avec le "time de création" on n'a plus ce problème. Merci pour cette 2nde astuce

C'est mis en place, c'était la solution idéale...
Modifié par Borak (23 Sep 2010 - 18:49)

En effet, ta deuxième image s’affiche instantanément grâce au cache puisque son nom existe dans le cache de IE (elle n’a pas de suffixe). Mais si tu la remplaces, IE affichera toujours l’ancienne image.

Sur mon site, j’ai à afficher souvent une cinquantaine d’images sur la même page, ce qui peut prendre une bonne minute, voir plusieurs...
J’utilisais time() auparavant et je l’ai parfois trouvé lourde d’utilisation car perte de temps, j’essai de mieux m’expliquer.

Quand j’utilisais le suffixe time(), j’allais sur la page une première fois et toutes les images se chargeaient avec un peu d’attente, ce qui est normal. Mon problème était que la deuxième fois que je revenais sur la même page, systématiquement toutes les images se rechargeaient et je devais attendre encore longtemps, et cela même si toutes les images sont identiques à la première fois.
Par exemple, pour l’image « arbre.jpg », le nom qui était comparé au cache de IE était différent à cause du compteur, à l’instant T1 c’était « arbre.jpg ?1285254280 », et à l’instant T2 c’était « arbre.jpg ?1285258997 » pour la même image. IE ne reconnaissant pas l’image dans son cache, il la rechargeait du serveur.
Mais au moins avec time(), j’étais sûr de ne pas louper la moindre mise à jour.

J’ai donc cherché une solution de garder le nom avec suffixe identique à celui du cache tant que l’image ne change pas. Sur une page déjà pré-chargée, si une seule image sur cinquante a été mise à jour, ça me permet donc d’afficher instantanément avec le cache les 49 images identiques, et de ne charger du serveur que la seule image concernée.
En utilisant filectime(), le suffixe reste le même tant que le fichier n’est pas modifié.
En reprenant l’exemple de l’image « arbre.jpg » :
T1 : « arbre.jpg ?1285254280 » (lors de l’upload de l’image)
T2 : « arbre.jpg ?1285254280 » (le nom ne change pas tant que l’image reste la même)
T3: « arbre.jpg ? 1285258997 » (L’image a été mise à jour, le client recharge l’image du serveur)

Voilà, ça fonctionne très bien pour mon site à présent, et il est plus agréable à consulter car plus rapide.

Brunchy> Pourquoi tu spécifies chaque fois le cache de IE ?

De manière plus générale, c'est le cache du navigateur web que tu utilises.

Alphonse> Je n'ai essayé la méthode que sur IE7 et IE8, je ne sais pas comment fonctione le cache des autres navigateurs, il faudrait en effet essayer pour la généraliser.
Modifié par Brunchy (10 Oct 2010 - 19:11)

Bonjour,

Une petite remarque tout de même :
A chaque fois que le navigateur recharge une nouvelle version de l'image, l'image précédente est toujours disponible dans le cache. Par exemple, avec le cas de Brunchy :

T2 : « arbre.jpg ?1285254280 »
T3: « arbre.jpg ? 1285258997 »

A T3, on affiche arbre.jpg ? 1285258997, mais on peut encore afficher la version précédente arbre.jpg ?1285254280.
Le problème est que la mémoire occupée par le navigateur augmente. Pour IE, le navigateur finit par planter une fois qu'il a consommé toute la mémoire disponible.

Je n'ai pas trouvé de solution encore, si vous avez des idées...

Je ne pense que qu’on puisse saturer la mémoire aussi facilement.
Avec un cache par défaut à 1024MB, si 50% est déjà occupé, il reste 512MB à remplir avec l’image, ce qui nous donnerait avec un fichier de 200Ko de notre image « arbre.jpg » la possible de la mettre à jour 2621 fois. Il faudrait déjà qu’on trouve l’intérêt de faire autant de mises à jour, et qu’ensuite l’utilisateur visite la même page au moins autant de fois (au moins un fois après chaque mise à jour), peu probable.

Par contre, il est vrai qu’avec « time() », c’était plus facilement le cas car à chaque visite on rechargeait (= nouvelle copie).
Si on visite un site qui contient en moyenne 10 images de 200Ko par page utilisant « time() », il suffirait de cliquer seulement 262 fois dans le site pour saturer le cache. Ce qui est probable si le site est fréquemment visité.
Modifié par Brunchy (22 Oct 2010 - 12:35)