Scrolling HTML gallery, possibly many images, needs lazy load/unload?

Question

I've been asked to show the results of an image d/b query as a coverflow-y type horizontal scrolling gallery of thumbnails (256px long-side,c. 25kb each). If a library is needed (likely), I'll use jQuery. Besides an image the gallery will likely show some caption (text) data.

Problem is, user's query could unwittingly pull 000s of results. Lazy-loading solves one side, but I can find little on lazy unloading as if the user keeps scrolling the gallery items will only ever grow in number eventually causing the browser to struggle with the amount of data. I figure I need to let the gallery load 10 items, showing the first 5, then lazy add up to X items after which for each item I add I delete the first gallery item. If the user scrolls back down, deleted items need to be lazily re-loaded.

I figure this a problem others must have faced before - even if in a slightly different display context. Would welcome pointers on how to go above the above. Also, in a WAN (web) context are there other performance issues I'm overlooking (e.g. number of gallery items to keep loaded)?

Clarification (in response to answer #1).

Perhaps 'unobtrusive' unload might be a better term. The heart of this is (in a jQuery context) how/where do I place the create/destroy calls?

Assuming the gallery is a scrolling <ul> (likely horizontal but I guess vertically should be allowed for) showing N <li> items at a time. The query recordset's offset (zero-based here) can be use to seed an id, e.g. <li id="x_12"> where 12 is the offset value. This should allow code to know for which offset to create/remove and item. It would also make it possible to detect arrival at start (offset 0) whilst AJAX-based loading could incorporate a message mechanism to indicate no next item (i.e. upper end of recordset).

The principle of this, I get. But being less familiar with more complex JavaScript and AJAX I need a nudge as to the practical code detail. My presumption is that if the basic concept works I may well be possible to add-in to existing JQuery based galleries (no point reinventing the wheel there).

Answer 1

There is actually no laziness to the unloading you are describing. Rather, you want to immediately destroy x number of objects when x exceeds a threshold.

This could easily be implemented on an Array or ArrayCollection as a FIFO queue. Some pseudo code:

var array = new Array()

function NewObjectInArrayCreate(object)

    if array.length > 1000
        array.pop()
    else
        array.push(object)

Answer 2

What you will need to do is have your create/destroy on your next/previous actions (this may be on mouse move, bar scroll etc.).

You will have to detect which direction you are going, by how much, and then use that number to remove x amount of items from the end of the line. You will have to keep in mind though that when going the opposite way the user will have to re-load those items.

Hopefully the browser will cache the images making load times faster, and delivering less of a blow to your server performance.

In terms of keeping things fast, my rule of thumb was "keep as many as you can scroll on either side of the view area" but that's more for generic sliders. If you're going to have large items loading, I'd keep a couple extra to allow for multi-clicks (I'd also try and load a couple more each time).

I would try and stop the user from unwittingly grabbing 1000's of items if it is within your power. If that IS an option, you may want to consider something other than a coverflow for your presentation.