Troubled by Cached Images

[Len]

Does anyone experience the same problem as I do? Here it is:

Suppose I have an image with size 300x450. Highslide works fine. Now I replace this image with a larger one, say 400x600 (with the same file name). However, everytime I click on the thumbnail, highslide still shows the old smaller image. I have tried refreshing, closing/relaunching the browser, cleaning up the cache files, I even reboot the computer, but the old image refused to away. How am I able to see the new image?

Thanks
Len

[torstein.honsi]

It is a common problem that IE remembers the size of the image. The fix is to uncomment line 798 in highslide.js, run the expander in IE, then comment it back again.

Code: Select all

    // uncomment this to flush img size:
    // if (hs.ie) img.src = null;

[Len]

Thanks, Torstein. What's the consequence if I leave this line permanently uncomment?

[torstein.honsi]

The concequence is that you server will get a lot of requests for a file called 'null'.

[torstein.honsi]

Update Feb 29 2008:
See hs.flushImgSize

[Exo]

This is a great addition - I've had problems with IE during development of a web site and it remembering image sizes, I thought it was IIS or something else until I found Firefox was fine.
Nice work - ideal feature to use locally at least during development of a site/

[torstein.honsi]

Thanks Exo, I noticed more and more users experience this wierd IE bug, so I made the workaround a part of the documented API. As you say it should be used only while developing, and removed later. If it isn't, IE users will trigger a "null" file request and a 404 on your server.

[guenter55]

Hi,
I hope I understand your solution. This solves the problem just for yourself.

But all other visitors of your website have the same problem too. When the page is loaded, IE takes the former image-size from cache.

You can solve the problem for yourself and all your visitors as follows:


IE takes the correct/new image-size if you link the picture a "?" and a random number at the end, i.e. mypicture.jpg?...
The number at the end must always be a different one. The best way doing this is to use a timestamp:

Change your site-extension from *.htm to *.php, put in the htm-source this php-snippet:

Code: Select all

<?php $timestamp = time(); ?>
<a id="thumbxxxx" href="images/fullxxxx.jpg?var=$timestamp" class="highslide" onclick="return hs.expand(this)">
   <img src="images/thumbxxxx.jpg" alt="Highslide JS"
   title="" width="150" /></a>




so you have to make sure there is always a different number at the end of the link.
You can also code it in javascript.

Und hier für die lieber deutsch lesenden:
(Cache-Problem lösen wenn in Größe geändertes Bild verzerrt mit alter Bildgröße dargestellt wird)
Ich hoffe, ich habe den Thread richtig verstanden! Die hier vorgestellte Lösung kann man nur für sich selbst anwenden. Aber alle User der Website haben das gleiche Problem, einmal die Site aufgerufen ist die Größe des Bildes im cache des IE, wird die Bildgröße dann geändert und der User ruft die Seite nochmal auf, dann sieht er das Bild in den falschen früheren Ausmaßen.

Hier die Lösung:
Dem link zum Bild ist einfach am Ende mit "?" (ohne Anführungszeichen) eine zufällige Zahl anzuhängen, zB. meinbild.jpg?12345.

Das alleine reicht nicht, denn die Zahl muss immer unterschiedlich sein! Am Besten geht das, wenn man einen Timestamp anhängt:

Wenn man php verwenden kann, ändert man die Extension der site von *.htm auf *.php und schreibt in den html-source folgenden code:

Code: Select all

siehe vorhin

Genauso kann man das auch mit javascript lösen.

Best regards
Guenter

[EarlyOut]

But all other visitors of your website have the same problem too. When the page is loaded, IE takes the former image-size from cache.

Only if you, the web page designer, keep replacing the image with one with the same name, but of a different size.

[torstein.honsi]

EarlyOut is right. This problem occurs when implementers are testing Highslide with different image sizes, so the fix is aimed at the implementer. The end user doesn't have this problem.

Of course if you deliberately design your page so that the image size varies within the file name, you can use the PHP timestamp option.