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



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

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.


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 (

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Latest member

Latest Threads