Clear cache of specific image

Question

I am currently working on a online auction website (Sorry but I can not share the link here). On the list of products, our client want the product image to update dynamically via real time when modified from the back-end. The solution bellow does the trick:

var nocache = new Date().getTime();             
$('#auction_id_' + aucId + ' img#' + imgID).attr("src", 'ItemPics/t' + new_image_url + '?' + nocache);

But when the user visits the product and then clicks on the back button to go back to the product list page - the cache of the product image is not cleared and the old image is back.

I can not disable the caching on the website since it causes too much loading on the client side.

(1) I have thought about creating a hidden iframe with the image as SRC and then refreshes during real time. (2) Simply reloading the page wont solve the problem so I also thought about manipulating a Ctrl + F5 using JavasSript to force request new image data when the users clicks on the back button = but I don't think any of these is the right way to do it.

Any ideas would be greatly appreciated, thanks!

Answer 1

You could probably have a configuration in your webserver that returns an HTTP header for image requests using Cache-Control: no-cache, max-age=0, must-revalidate, no-store This will force the browser to not store the image data in cache i believe.

Check out how cache-control headers are handled in firefox: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching_FAQ

Answer 2

The problem you are facing is not that the image is cached, but that the whole page is.
So when you come back from history, the scripts are not executed and the image still has the same no-cache parameter (see this answer for more info).

One solution to workaround this is to use the window.onpageshow event handler (with a lack of support for IE<11 ) or to call an empty function in the window.onunload event handler.

if('onpageshow' in window){
  window.onpageshow = changeImgSrc;
}else {
  window.onload = changeImgSrc;
  window.onunload = function(){};
}

Answer 3

Thank you all, my coworker was already able to solve the problem:

In your product list page, add a unique ID to your images:

<img src = "images/img1.jpg" id = "image_<?php echo $imageID; ?>" />

In your backend, when the update image button is clicked, store the new image on a session variable:

session_start();
$_SESSION['modified_item_images'][$ItemID] = $strNewPicName;

Then in your product list page, store the updated images array into a JavaScript variable:

var modified_item_images = <?php echo json_encode($_SESSION['modified_item_images']); ?>;

Then loop though each item and add a time stamp at the end of each updated image link:

$(document).ready(function() {

// Append updated images on back button click
if(modified_item_images){
    $.each( modified_item_images, function( key, image_src ){
        var nocache = new Date().getTime(); 
        $('body').find('#image_' + key).attr('data-original', 'ItemPics/t' + image_src + '?' + nocache);
    });
}

So when a user clicks on the product and hits the Back button of their browser, we will check if there are updated images stored in the session variable, if yes then we re-append them with a new time stamp to prevent the browser from rendering the old images from cache. This will only apply to specific images that were dynamically modified which solves the problem.