Sujet du problème : Comment forcer le rafraichissement d'une image qui a été modifiée. Supprimer l'image en cache, ou forcer le navigateur à actualiser l'affichage

Avec les navigateurs Mozilla ou Internet Explorer je rencontrais le même problème :
Lorsqu'une image avait été modifiée (en fait, dans mon site = remplacée par une autre, ou supprimée) l'ancienne image (ou l'ancienne version) continuait à s'afficher car elle se trouvait dans le cache du navigateur...
Il fallait donc ré-actualiser la page pour faire apparaitre la nouvelle photo, ou la page sans photo si cette dernière avait été retirée...
Pour moi, ce n'est pas un gros problème, mais pour celui qui venait sur le site pour vendre ses cartes postales anciennes et qui téléchargeait la mauvaise image scannée... quelle surprise lorsqu'il choisissait de supprimer cette photo... elle était encore là !
La tentation était alors à resupprimer une photo qui n'existait déjà plus, et cela ne changeait rien à laffichage de l'image qui restait dans le cache du navigateur.


En surfant, je suis tombé sur une page de forume sur forum.alsacreations.com

trop compliquée pour moi car c'était pour une page en JSP, et que je recherchais un truc en JavaScript pour compléter ma page en PHP

Sur cet article de forum, wildmary avait cependant la bonne idée de citer la page http://hivelogic.com/articles/the-cache-trick/ du site en anglais de Hivelogic ou il avait trouvé sa solution.

L'astuce :

Utiliser un nombre aléatoire dans le nom du fichier image, afin que le navigateur imagine avoir affaire à une nouvelle image qu'il n'a pas dans son cache.

Avec (en PHP)    
$randy = md5( uniqid (rand(), 1) );
          on obtient un truc du genre :
4b9c065ca63b9fe65410f39be65c6363
La présentation qui en était faite fait référence à un script d'images de fond de page tournantes (backgroundimage) que je n'ai pas essayé.
Le but pour moi étant seulement qu'il affiche l'image actualisée sans utiliser son cache, j'ai simplement utilisé l'Url-Rewritting afin que l'image affichée soit la même qu'auparavant, c'est à dire simplement le nom de fichier débarassé du code aléatoire ajouté

Exemple :
L'URL de l'image 4b9c065ca63b9fe65410f39be65c6363_image_1515-RECTO.JPG
sera réécrite (sans que le navigateur le sache) en 1515-RECTO.JPG

Pour cela, j'ai donc placé dans le .htaccess :
Options +FollowSymlinks
RewriteEngine on
RewriteRule ^([a-z0-9]*)_image_([0-9]*)-RECTO\.JPG$ /PHOTOCARTES/$2-RECTO.JPG [L]


Et dans ma page PHP qui utilisait la variable $moncodecarte comme numéro de carte postale, j'ai ajouté :

$randy = md5( uniqid (rand(), 1) );
et j'ai placé ce résultat devant mon Numéro de code carte qui sert aussi de partie de nom à mon vrai fichier-image ($moncodecarte-RECTO.JPG) $nocachecarte=$randy."_image_".$moncodecarte;

Puis, pour l'affichage de l'image qui ne sera donc pas récupérée dans le cache j'utilise
if (file_exists("/homepages/10/d181418386/htdocs/PHOTOCARTES/$moncodecarte-RECTO.JPG")) Print ("<img src='http://www.mistercard.net/PHOTOCARTES/$nocachecarte-RECTO.JPG' width='300' border='0'>");

Donc finalement pas eu besoin de JavaScript qui était ma piste initiale, par contre il faut que l'hébergeur autorise l'UrlRewritting !

Merci de m'avoir lu !
Ziprof   Retour aux histoires de PHP et MYSQL Livres d'occasion