/    Sign up×
Community /Pin to ProfileBookmark

I Can’t Find A Solution For This Problem …

Hi,

On my website I want to give users the option to rotate an image 90° by clicking a rotate-button. In the webbrowser I give the user feedback by rotating the image 90° and send the file ID of the particular image to the server (AJAX) where the actual image is rotated. Everything works fine, except when reloading the webpage, the webbrowser often shows the non-rotate version from its cache, instead of reloading the actual rotated file from the server.

I really would want this to work. Has anyone have any suggestions about how to solve this problem? I cannot rename the filename, because the url from other websites won’t work anymore …

Thanks in advance!

Christophe

to post a comment
PHP

4 Comments(s)

Copy linkTweet thisAlerts:
@xeteaOct 24.2010 — Try to add these two lines in the <head> part of your html document:

[code=html]
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
[/code]
Copy linkTweet thisAlerts:
@Christophe27authorOct 24.2010 — Hi,

I didn't know that was possible. However, it doesn't work all the time. In firefox it seems to work, but in Chrome and Safari it only works after a page reload. And even then, not all the time ... The images are loaded via AJAX so there isn't a real page reload ...

In IE it doesn't work at all ...

Christophe
Copy linkTweet thisAlerts:
@NogDogOct 24.2010 — You may want to set up an image file-server PHP script, via which you can then set any no-cache headers via the header() function.

Image would be accessed with something like:
[code=php]
<?php
// example data:
$image_name = 'foo_bar.jpg';
?>
<img src='http://example.com/image.php?name=<?php echo urlencode($image_name); ?>' alt='' />
[/code]

Then image.php would be something like:
[code=php]
$dir = "wherever/the/images/are/";
if(!empty($_GET['name'])) {
$name = basename($_GET['name']);
if(file_exists($dir.$name)) {
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Content-Type: image/jpeg");
readfile($dir.$name);
exit;
}
}
header("Status: 404 Not Found");
?>
[/code]

Alternatively, there's probably a way to set up a .htaccess file in the image directory to set the caching headers, but I'm too lazy to do the research on that for you. ?
Copy linkTweet thisAlerts:
@Christophe27authorOct 24.2010 — Hi NogDog,

Thanks for the reply. I have done what you said, but strangely it doesn't work. In the online script I have set the headers which are (according to FireBug) set when requesting an image via JSON.

Cache-Control no-cache, must-revalidate

Expires Sat, 26 Jul 1997 05:00:00 GMT

Like said, the images are being load via AJAX. On a page refresh it does work (most of the time) but when navigation trough the images with back and next button via AJAX, the images are loaded from the cache ... not from the server ...

Christophe
×

Success!

Help @Christophe27 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...