Question

I’m having problems with a function to load an image. Image is loading only the first time, after that I’m getting the same image. Only the first time goes to photoHandler.ashx.
What happens here? is jquery caching the image? How to do to load always the correct image?.
This is my function:

 function getObjectFromServer()
{
var hUrl = "myHandler.ashx";
var data = {};
var data.queryStringKey = "theKey";
 $.post(hUrl, data, function(response){
    if(response.length>0)
    {
        var myObj = jQuery.parseJSON(response);
        var $photo = $("<img alt='' class='hidden' />").load(function(){
          $("#photo-container").append($photo);
          $photo.fadeIn('slow');
        }).attr('src', myObj.photoSrc);
        //myObj.photoSrc contains: photoHandler.ashx?photoId=anUniqueIdentifier
    }
 });
}

Edit:
If I go to the element with firebug i can see the correct ‘anUniqueIdentifier’. MyHandler.ashx always is called. i’m having problems with photoHandler.ashx. I added random but it does not works for me:

var randomQS = "&Id=" + Math.round(new Date().getTime() / 1000);
//...
$photo.fadeIn('slow');
}).attr('src', myObj.photoSrc + randomQS);

Update:

I resolved it, the problem is PhotoHandler.ashx, this controller is caching the image, this way adding random value to url does not work.

Thanks.

Answer 1

Your browser is caching the image you need to break the cache by appending a random string to it:

http://domain.com/myimage.jpg?random=12893128971844

You can use something like JS math fn: Math.random()