Best way to cache a bunch of images on the client? Possible to "stream" image info for caching after

[Guest]

I've built an application that scrapes JPG images of webpages and PDF
instances of those webpages automatically from an RSS feed. References to
the scraped resources are persisted to our database. I've also built an
administrative interface that allows someone to scroll through a datalist of
the JPG images of the page and to delete the unwanted items.

The JPG previews of the webpage are rendered in several sizes: iconic,
mid-sized 600px cropped, and full-sized, full-length webpage images.

The purpose of the JPG preview images of the webpages is to eliminate the
annoying latencies associated with reviewing stuff on the web. Because they
are pre-rendered JPG images of webpages, there is no need for the user's
browser to contact a remote server, download a webpage, render that webpage,
etc. etc. This matters when you are dealing with dozens or hundreds of
items.

Given this background, what is the best way that I might precache all of
these preview images on the user's browser? The idea behind the caching is
that they would have near-instaneous access to the image data for the small,
medium, and large preview images.

Other info:
I can easily build an ArrayList of the images' URLs that I want to cache.

The images will show up through regular ASP.NET postbacks and through AJAX
widgets (Thickbox), though I doubt that matters.

Ideally I could make this so that all of the small images would download
BEFORE the page is rendered, and the medium and large images would stream in
AFTER the small images/page was rendered, but while the user was still
browsing through the list.

Not sure if this is ASP.NET specific at all, though I will be running this
on an ASP.NET page and an ASP.NET 2.0-equipped server if that helps.

Thanks for any help you can throw my way.

-KF

 

[bruce barker]

the only way to cache is to ask the browser to download the image. ther
are two common appoaches:

1: use a zero size img tag
2: in javascript

var img = new Image();
img.src = "myimage.jpg";

the browser will only download 2 images at a time. in javascript you can
check the img.readyState to see if the image has been downloaded. the
browser will fire onload after parse but before all images are downloaded.

-- bruce (sqlwork.com)