I have an array of pictures in my web app and I want to programmatically display a picture from that array. Any given picture is displayed several times throughout a session, so having the browser cache them is ideal.
I haven’t found a way that works though–each picture reloads from the server every time.
Ideally, I’d like to have the images cached by the browser across different sessions, but I haven’t even been able to get images cached during a single session.
Searching the feedback database and forum posts, I found a few references to image caching not working (especially Verified Feedback #32954 , although 30398 and a few others seem related), so I’m wondering if it’s just not a possibility right now?
If anyone has a working example using just pure Xojo, or using MBS or Web Custom Controls, it’d be appreciated. I’d be open to other plugins, too.
Assign ur images to a Session Property and Preload it in Session.Open Event:
Sub Open()
self.picture_s = picture // added in the IDE in a folder named "Icons" and self.picture is a WebPicture property
// The real preloading
if self.picture_s.Preload then
end if
End Sub
In my case all images get loaded once and theyre cached.
Can it be done somewhere other than the session property? My apps can have hundreds of simultaneous users (with an ultimate goal of thousands), so I’m hoping to minimize the resources consumed per session.
The first place I tried was in an app property, but that didn’t seem to work. I was hoping to be able to cache each picture in the browser on first use without storing an instance in every session. Every session won’t need every picture, so I don’t want to start caching any individual picture until its first use by a particular user, but then keep it cached in their browser throughout the session, or long-term for future sessions, too.
You obviously need to store it in a session property, but you may can preload the pictures after the user logged in, so the user doesnt have to load every single picture.
Setting the session property of a web picture to Nil allows you to share it with any session. You can store these in a Global Module or in a dictionary on your App object.
You can also lazily instantiate these pictures with a helper method.
Personally I do things like App.GetPicture(“TrashIcon32x32”) and it will get it from the cached dictionary otherwise add it to the cached dictionary.
Another good idea is to use a Session.GetPicture() and have it look in a session specific dictionary and then call to the App.GetPicture if it doesn’t find it. That way you can override the images for a specific session if you want.
I also use sprite sheets rather than pictures. I have one sprite sheet with all my icons and then a custom WebControl to display a passed sprite. I also use a helper method at the start of the app to generate the spritesheet from all the icons so I can quickly add sprites to the spritesheet without having to rebuild it myself.
You can also use the HandleSpecialUrl event to serve up images consistently from the same URL through relaunches/instances of your app. This is helps with caching too.
Brock, I really like the sound of the HandleSpecialURL approach since it would cache through relaunches.
I’ve written code in HandleSpecialURL which successfully parses the special URL to determine which picture (stored in a module WebPicture property) it should display, but I’m still not sure of the line or two or three that would send the picture to the browser from there.
I could return the URL of the stored picture easily enough using a request.print statement, but unless I’ve misunderstood something, that would just get me back to nearly the same caching problem I started with.
What’s the magic line of code that just sends the actual picture to the browser at that point?
[quote=185564:@Seth Ober]Brock, I really like the sound of the HandleSpecialURL approach since it would cache through relaunches.
I’ve written code in HandleSpecialURL which successfully parses the special URL to determine which picture (stored in a module WebPicture property) it should display, but I’m still not sure of the line or two or three that would send the picture to the browser from there.
I could return the URL of the stored picture easily enough using a request.print statement, but unless I’ve misunderstood something, that would just get me back to nearly the same caching problem I started with.
What’s the magic line of code that just sends the actual picture to the browser at that point?[/quote]
Don’t return the URL which would not be cached. Get the content of the file with a BinaryStream and print that directly to request. For the browser, that will be the URL of your app+somefolder+picture and it will cache it.