Filtering through a large list of images on a single web page - without a database

Question

I am looking at building a web page which is going to have a list of over 100 medium sized images and unfortunately I will not have any access to a database.

The user will be filtering through the images and displaying around 8(at most) at a time.

The idea is to filter through the images using jQuery and CSS classes, to show/hide etc, but even if all images are hidden, they will still have to be loaded once the page is opened.

What would be the best way of dealing with this, so the page loading time won't be ridiculous, some sort of java prefetching etc? I am unsure if there is a simple solution to this, but any ideas would be appreciated!

Thanks.

Answer 1

i suggest this:

you store all your images at the file system. because reading every time from a directory is very heavy you should read all the images paths add them to some kind of list or dictonary and store them in the cache.

thats the first part of the performance. next part the page itself,

when a user will load the page you shell serialize that list from the cache to the a json object on the client.

and from there thats easy. you have all image paths on the client allready

now you can create a jquery gallery or download one. and every time just read the next 8 images from the json object. create an img element for each one. and that is it. very lightweight especially for your server

:)

Answer 2

Ouch, sounds like a nightmare.

Using jQuery / CSS isn't really going to speed anything up using a naive show / hide implementation, but you should be able to get a way with using Ajax to load sets of images in on the fly when the user presses the filter button.

Another option might be to use XML with XSLT to act as a sort of mock-database (it's a fairly horrible solution, but the spec is a little horrible too).