I am uploading a replacement image to a server using PHP file upload. It has the same name as the old image.
After the upload, the old image is still displayed from the browser cache but can, of course, be refreshed with Control+F5 on most browsers - then the new image is displayed.
I want to automatically get the new image to be displayed, without involving the users (they keep forgetting to refresh). This question has been asked and answered several times, for example at HTML - I upload new image to site, old image still loads
The solution I tried was, after the file is uploaded, then I add "fake" data to the image src attribute thus:
src="img.jpg?t=x" (where x is the time generated with php).
This works in the sense that in the file upload program I see the new image. It is said to cause the image to be loaded from the server, and not the cache. I'm not sure I understand the mechanism.
I had assumed this would also force the copy of this image to be refreshed in the cache, but the next time the image is loaded, either in the same script or a different page, in the same browser, the old image still shows. In other words the old image is still in the cache and is still being used. Of course you can refresh and then all is well.
I have tested this on several browsers including Chrome and Firefox.
Is there a way to force the new image to be loaded not just when I add the "fake" parameter, but also to be replaced in the cache. I'm sure this must be answered somewhere, but I can't find something that works.
Related
I implemented a system to edit images displayed on a website.
When an image is edited, I want to display its last version on all pages of the site (where it's called), at least for the user who edited the image.
Now I'm searching a better way to clear the cache for a specific image than adding the timestamp to the end :
<img src="myimage.jpg?01215654" alt="" />
Why ?
It supposes to always add the timestamp at the end of the image path, with a session system for example.
But when the session expires (for example, user leaves the site, and go back few hours after), the real path of the image is displayed :
<img src="myimage.jpg" alt="" />
And the navigator randomly displays the old image, or the last version... Because Apache cached :
myimage.jpg as the old image
myimage.jpg?01215654 as the new version because no one hit it before (was loaded as a new media)
Limitations
I can't change the path of an edited image, for example "myimage.jpg" to "myimage-v2.jpg", which could solve the problem...
Images are not served from a controller (not served from a PHP script), they are direclty loaded from their path on the server.
I don't want to use a session system that add timestamp or version string at the end of an image path with JS.
What I want
I want to say that the cache of "myimage.jpg" has expired, and so to display the last version, and then cache it normally, until the next edition. So I would like to load the image with "200 status", and not "304 modified" after an edit.
Note : when an image is edited, I reload it with JS (JQuery) in a hidden div, if you now a way to change cache header ?
So what I want is to clear the cache header of a specific image that is edited, taking into account the limitations of my project, so if possible by using cache directives without serving the image from a controller, is it possible ?
This whole question is very confused.
Apache cache? ...No, the cache is in your browser, not in Apache.
Sessions adding timestamps to image URLs? ...No, the querystring with the timestamp must be added to the HTML using server-side script (such as PHP, for example). It has nothing whatsoever to do with browser sessions. (And actually it's generally much better to use the file last-modified time rather than the current timestamp, BTW).
There are a number of ways to achieve the effect you want, each with its own benefits and drawbacks depending on your situation. You may want to read my answer here.
I am creating a dynamic image dependent on a lot of information about the logged in user, but with so many users online, the image system is using a lot of the resources my website hosts have allocated to me.
Is there a way to tell the browser to temporarily cache an image? Similar to temporary cookies?
The image contains numbers such as post count and other frequently incrementing numbers that can cause the browser's automatically cached images to re-download the image potentially every page load. I wouldn't mind a little inaccuracy to save a lot of processing for my server
[Edit]
Browsers already do cache content(unless specifically told not to do so), if it detects a change in last modified then it reloads it.
I am taking a guess that your image being generated is either a) being returned to the browser by a specific php script() or b) is being stored temporarily but is being updated and so the browser retrieves the updated version.
[/Edit]
If you are outputting an image based on dynamically generated content you can write this temporarily to a directory and then based on a predefined time period pull the image if its valid.
if(file_exists($file) && filemtime($file) <= time()-60*20) {
// Regenerate image
} else {
// Load image from cache
}
The example above will not regenerate the image for 20 minutes.
Try to look here
http://www.webscalingblog.com/performance/caching-http-headers-cache-control-max-age.html
In other way, you can set up cache-control header in PHP, and display images using script.
Setting up a live image stream on a website, using images from a webcam. Trying to work out the implementation of it. The webcam takes a picture and requires a crop, resize and upload (not necessarily in that order), before it is displayed to the user, with a new image every minute. Currently I have a php script that does the cropping and resizing, while a webcam program automates the picture taking and uploading. However...
Uploading directly over the existing image causes an issue if the user reloads the page while the upload is taking place, resulting in a missing image.
Uploading with a different filename, then renaming it causes an issue if the user reloads the page during the renaming, resulting in a combination of both images.
Using a sequential filename system then gets tricky with the webpage requiring to know the new upcoming file every minute, along with a potential backlog of images.
Any suggestions are appreciated. Hopefully I'm missing something simple.
Thanks.
Just upload your image with different name, set the current image name somewhere, either in config file or MySQL, and after upload change it.
I'm working on a PHP application to store some personal information (including photo). I'm storing the image on a specific folder (let's say myapp/images/people/).
After saving a photo my app is redirected to a page showing the information of the specific person (kind of a profile).
If the photo is saved for the first time (no other photo was previously saved for that person) then the photo is shown in the profile. Everything seems to work at this point.
The problem is when I want to change the photo. When I replace a photo my applications keeps showing the old one. I've checked the server and the old photo is gone, there's only the new one (as I need) but the application doesn't show it.
I guess it's something to do with cache.
I've tried by adding the html tag with no cache values, I've tried by adding the same values by using the header() PHP function but nothing.
I also tried by using:
if(file_exists($imagepath))
{
unlink($imagepath);
}
and similar I've used
if(file_exists($imagepath))
{
unlink($imagepath);
clearstatcache();
}
but also nothing.
Can someone help me with this? Any idea about what's going on? The new photo is in the server, the old one is not but the app keeps showing the previous file.
The image is cached in the browser. The best way is to generate a new image name on the server and return the new image in the HTML. Since it is a new image for the browser, it won't get it from the cache and you will see the new image in the application.
Okay, so on my website a user can upload a profile picture. But the issue is, if they update it by uploading and overwriting the existing profile picture they have to wait for their browser cache to clear and the same for everyone else on the site.
I know I could easily beat this by sticking a string on the end of the image URL e.g. ?id=22185 , but that will make my site loading times VERY slow.
Could any of you recommend a way of making the user's profile picture update instantly for every user on the site?
Use the file modified time as the URL variable. That way the image will be cached until that number changes, which only would happen of the file is updated.
Set unique name for each image. When user change image, e filename change too and browser will load new image instead of serving old FROM cache
You could easily add a timestamp to your files or you could use the "headers" function of PHP to change the "Expire" param.