Circumvent the browser's cache for images on a web page
One problem that I faced a couple of times is that the caching of images by the browser.
All browsers, by default, store the pages and articles contenutivi (just like the pictures, or even a movie. Swf) in their cache to speed up the browsing experience.
Unfortunately this is also an annoying obstacle to those who develop web application.
To force a browser (server side) to not use the cache for a given page, there are a couple of tricks, but unfortunately they do not work with images (or other objects) embedded in the page.
For example:
BACKGROUND A.1 - No server side and precautionary default settings of the browser
you have a page [index.htm] that contains an image [photo.jpg].
User A requests the page [index.htm]. The server sends it to B as it is. The user's browser to receive it, check out all the embedded objects (including the image [photo.jpg]) and requires them to server B, running everything in the cache. Suppose
over this, the server B, the image is replaced with a new name while keeping the [photo.jpg]. You
in re the same page. The user's browser sees the page and the objects are cached and then shows them a video to the user without requiring those updates to the server B.
Result: You have not see the updated image.
SCENARIO
A.2 Suppose that the server side has to be done so that the user does not use the browser cache as regards the page.
User A to log on again [index.htm]. Your browser requests a page from that server B returns. The user's browser and runs the search for embedded objects. Among these is the image [photo.jpg] that is stored in cache, so the browser will not request to Server B.
Result: the user gets the updated page, but NOT the new image!
SOLUTION:
To overcome this problem I found a solution that allows you to trick the browser, forcing them to believe that they have to search always a different image.
code to embed an image in an HTML file is as follows:
\u0026lt;img /> src="photo.jpg"
to convince the browser to search for a different image from the previous one, just use sending bogus parameters.
\u0026lt;img /> src="photo.jpg?parametrofasullo=53876453"
As you can see the "src" attribute of the img tag has changed, but its meaning is actually remained the same as before. The string is different, but all the characters are after the question mark do not affect the level of the hierarchy to search for the file [Photo.jpg] on the server.
changing these parameters each time the user A receives the page from server B, try to convince the browser to update the image without using the cache.
: It
"photo.jpg"! = "Photo.jpg? 53876453"
To obtain this solution just use a little script to work server-side languages (PHP, eRuby, ASP) for each image that we need which are not stored in cache.
Example in PHP (the page should be index.php):
\u0026lt;img src = "photo.jpg \u0026lt;? Php echo"? ". Rand (0.30000);?>" />
The PHP code will produce using the function rand () a different number each time.
