JCrop caching image

Question

I'm trying to implement Jcrop with a list of images. At the moment, when you click the link to crop, a lightbox loads an ajax call with the image and all the cropping tools and everything is working great. I've tested across several images in the db and all looks good.

however, once I crop the image and the lightbox closes, if I then try to crop the image a second time, it's still showing me the original image, rather than the newly cropped image. Is there something in jCrop that caches the image and if so, can I switch it off so that it pulls the fresh image each time it's called through ajax? (refreshing the page does update the image to the correct one btw, but that defeats some of the other features I have going on this page.)

Thanks in advance!

Answer 1

I suggest changing the URL when the image data from the server changes - otherwise you'll run into caching issues of many times. Cache-control isn't enough - some browsers ignore the directive.

I'm not sure what server-side platform you're running, but here's an easy solution if it is Windows/IIS.

Answer 2

The image is probably kept in the cache of the browser. This can be avoided with Cache-Control headers on the server side:

Cache-Control: no-cache
Cache-Control: no-store
Cache-Control: max-age=0

This will prevent caching in any case though.

Answer 3

I was also facing the same cache problem. I was using colorbox/fancybox croping window after ajax uploading. But there was same image either if I select the other image. But when I crop the image it crops the right image but the image which is showing in crop window that was Old.

I spent lot of time into this and get the solution. You just need to change the image name randomly, this will resolve the EI cache problem and you will always get the new uploaded image.

Regards, Jitu