PDA

View Full Version : image caching



nicobarten
14 Oct 2009, 5:16 AM
I have made with Extjs an app which has a grid of users. When i double click a user in the grid, it opens a window with the properties of the selected user. Also there's a picture of the user (which are stored in a folder on the server). If there's no picture of the user uploaded yet, there'll be a standard empty image.

Code which shows the image:


// much other code. The boxcomponent is in a panel.
xtype: 'box',
id: 'personelPhoto',
cls: 'personelBox',
autoEl:
{
tag: 'div',
cls: 'personelPhoto',
children:[
{
tag: 'img',
src: './images/empty.png'
}]
}


When i double click on a user, the user info window loads, including the image:


personelWindow.show(); // shows the window
var photo = Ext.getCmp('personelPhoto').getEl().dom.childNodes[0];
photo.setAttribute('src','./data/data.php?sort=personel&action=get-foto&id=' + this.personelID +'&random='+ Math.random());


The image is loaded from a data.php file like this (just a part of the code):


header("Content-type: image/png");
readfile("./../images/user.png");


When i open the user window, the image loads just fine. The problem is however, when i close it and i open another user, the window still shows the image of the previous user, and after a second or two the new image is loaded.

Is this because the previous user image is still in cache? I tried several other methods, even changed the src of the image before the show() command was called, but none worked well so far.

14 Oct 2009, 5:32 AM
you need to somehow attach a cache buster to the src.

for instance:

src: './images/empty.png?_dc=' + new Date().format('U')

mschwartz
14 Oct 2009, 5:55 AM
If you know the modification time of the image file on the server (e.g. received it in some previous ajax request):

src: './images/empty.png?_dc=' + image.date

The advantage of this is you get the image cached until the image is changed on the server instead of absolutely fetching it each time.

So if you are making a list of users in a grid, the store records would contain the image file's date.

Jack9
14 Oct 2009, 10:08 AM
You can also attach an id (timestamp) via the webserver for filetypes/patterns. This is the preferred method to reduce caching.

14 Oct 2009, 10:12 AM
You can also attach an id (timestamp) via the webserver for filetypes/patterns. This is the preferred method to reduce caching.

preferred is relative to the developers, requirements, etc.

Jack9
14 Oct 2009, 12:29 PM
Preferred meaning common, testable, and reliable, imo.

nicobarten
15 Oct 2009, 12:21 AM
Hm well the problem wasn't caching i see...

I solved it by setting an empty (white) image to the image source right before it hides the window.

Now when i click the next user, it opens the window, shows for a second the white image, and then loads the right user image.

Although this is better than first, it would be even better when the window only shows after the new user image is done loading... is this possible?

KciNicK
26 Oct 2009, 3:42 AM
Hm well the problem wasn't caching i see...

I solved it by setting an empty (white) image to the image source right before it hides the window.

Now when i click the next user, it opens the window, shows for a second the white image, and then loads the right user image.

Although this is better than first, it would be even better when the window only shows after the new user image is done loading... is this possible?

yes, using a callback on the show method, you should disable the button too to prevent double click, and reenable it after show, cya...