Local PreLoad Image Caching

[Grok]

Using Javascript, I want to retrieve an image from the server to the local cache, and store the absolute path to the local cache file (temporary internet files) in a Javascript variable.

I looked in the image rollover techniques documentation thinking they would typically prefetch an array of images to speed performance.  The prefetch technique was not documented.

Anyone know this technique and can show me some sample code for it?  Note that I am NOT interested in mouse rollover techniques.  I AM interested in prefetching an image prior to displaying it.

Thanks,
Grok

[Adron]

Is this at all possible?

I suppose allowing javascript in a browser to access your hard drive might be a security setting, but it's not obvious to me.

[Kp]

Prefetching the image is pretty easy to do IIRC.  However, like Adron, I don't know if you can actually find out what the browser has done with it afterward.  My experience is limited to having the browser load up the images in preparation for a mouseover or timed auto-rotate.  I've never checked (or, prior to now, cared) whether the browser caches the prefetched data and if so whether it caches in memory or on disk.  If you're still interested in the prefetch with these limitations, I can dig up a sample document.

[Grok]

Is this at all possible?

I suppose allowing javascript in a browser to access your hard drive might be a security setting, but it's not obvious to me.

This application uses an ActiveX control on the client browser.  Since ActiveX controls are inherently insecure and ignore all rules of browser security, it can access the hard drive on the user's system.

If I can figure out how to address the cached images by environment variable and filename, it will ease working with the images.  Something like ActiveX.FileName = "%internet_cache%/imagefilename.tif".

[Grok]

Prefetching the image is pretty easy to do IIRC.  However, like Adron, I don't know if you can actually find out what the browser has done with it afterward.  My experience is limited to having the browser load up the images in preparation for a mouseover or timed auto-rotate.  I've never checked (or, prior to now, cared) whether the browser caches the prefetched data and if so whether it caches in memory or on disk.  If you're still interested in the prefetch with these limitations, I can dig up a sample document.

Yes, I am.  I found examples that supposedly prefetch by loading an array with image urls, but I really don't see how an array of strings { "domain/filename1.gif", "domain/filename2.gif" .. } will cause the images to load to the cache.  So those examples were probably wrong.

I also would like to learn how to set the expires mode on individual images, if possible.  The question is for work, but think about Skywing's webchannel.  The icons are downloaded from vl.com every page refresh.  By answering the previous questions, we could have webchannel do the same (precache the 12 or so images) and significantly reduce traffic for webchannel.

[Kp]

If I can figure out how to address the cached images by environment variable and filename, it will ease working with the images.  Something like ActiveX.FileName = "%internet_cache%/imagefilename.tif".

Try "%USERPROFILE%/Local Settings/Temporary Internet Files"?  This seems to be where my IE cache lives (even though I don't use IE, you said earlier all your viewers will be using it).

Yes, I am.  I found examples that supposedly prefetch by loading an array with image urls, but I really don't see how an array of strings { "domain/filename1.gif", "domain/filename2.gif" .. } will cause the images to load to the cache.

This is some fairly old JavaScript, but it should still work:

Code Select Expand

var images = new Array(4);
images[0] = new Image (x_width, y_width);
images[0].src = "http://www.valhallalegends.com/images/vl2black.jpg"; /* or whatever image you want */
images[1] = new Image (x_width, y_width);
/* etc. */
You could just as easily have many unique variables instead of an array of images, but IMO this approach is cleaner.

I stopped using it because my browser at the time (Netscape 4) seemed to degrade rapidly if the page was refreshed (though I had many more than 4 images pre-fetched in this way).  My guess is that its garbage collection was buggy, leading to extra copies of the image in memory.

I also would like to learn how to set the expires mode on individual images, if possible.  The question is for work, but think about Skywing's webchannel.  The icons are downloaded from vl.com every page refresh.  By answering the previous questions, we could have webchannel do the same (precache the 12 or so images) and significantly reduce traffic for webchannel.

I don't know how to do this, and the prefetch method I had in mind doesn't seem to keep the data cached across page reloads (but keep in mind all my testing was done on Netscape, and IE might behave differently).

[Grok]

Thanks for the above.  I will try it out for my application.

I don't know how to do this, and the prefetch method I had in mind doesn't seem to keep the data cached across page reloads (but keep in mind all my testing was done on Netscape, and IE might behave differently).

This method you posted can easily be done in WebChannel, by creating a parent frame that does not reload.  The parent frame would contain the image array, and the child frame would be able to reload freely, displaying images by way of document.parent.images[n].src.

[Kp]

This method you posted can easily be done in WebChannel, by creating a parent frame that does not reload.  The parent frame would contain the image array, and the child frame would be able to reload freely, displaying images by way of document.parent.images[n].src.

I hadn't come up with a good way to do that and not mess with the layout, so I'd rejected that idea and not mentioned it.

[Grok]

We discussed the WebChannel page at work, and decided it could try an invisible 1-pixel high parent frame with the remainder of the screen being everything else.  The parent frame could contain the image cache, and not refresh, while the child frame is everything that WebChannel is currently.  Adjust the child frame to get its image.src from the parent's image array.  Hope I said this adequately, the experienced guys here said it will work.

[Kp]

Makes sense to me, but it'll cause a nuisance for those of us who use frame-free browsers!

[Grok]

Makes sense to me, but it'll cause a nuisance for those of us who use frame-free browsers!

Code could detect the support of frames, and send the frameless page for people wishing that support.

[Banana fanna fo fanna]

Applet?

[Grok]

Client side?  Would require everyone load some ewwy JVM.  Yes?

[Banana fanna fo fanna]

No, JVMs are already loaded on most machines.

[Kp]

No, JVMs are already loaded on most machines.

Pretty sure Java doesn't work at all in any of the browsers I use regularly.