Scrolling through an HTML gallery, possibly a lot of images, requires lazy loading / unloading?

Question

I was asked to show the results of the image of the d / b request in the form of a horizontal scroll gallery like coverflow-y thumbnails (256 pixels long, c. 25kb each). If a library is needed (probably), I will use jQuery. In addition to the image, the gallery is likely to display some header (text) data.

The problem is that a user query can unwittingly retrieve thousands of results. Lazy-load solves one side, but I can’t find it a bit on lazy unloading, as if the user continued to scroll through the gallery elements, only ever grows, which will ultimately lead to the browser struggling with the amount of data. I believe that I need to let the gallery load 10 items, showing the first 5, and then add the lazy up to X items, after which I delete the first item in the gallery for each item added. If the user scrolls back, deleted items should be lazily loaded.

I believe that the problem others should have encountered before is even in a slightly different display context. Pointers on how to go above the above will be welcome. Also, in the context of WAN (web), are there other performance issues that I miss (for example, the number of gallery items that need to be saved)?

Clarification (in response to answer No. 1) .

Perhaps "unobtrusive" unloading might be the best term. The heart of this (in jQuery context), how / where can I place create / destroy calls?

Assuming the gallery is a <ul> scroll (probably horizontal, but I think it should be allowed vertically) showing N <li> elements at a time. The offset of the query record set (based on a zero value) can be used to seed the identifier, for example. <li id="x_12"> where 12 is the offset value. This should let the code know for which offset to create / delete and the element. This would also detect the arrival at the beginning (offset 0), while AJAX-based loading might include a message mechanism to not indicate the next element (i.e. the top end of the recordset).

The principle of this, I understand. But, being less familiar with the more complex JavaScript and AJAX, I need to push into the practical details of the code. My presumption is that if the basic concept works, I can well be supplemented by existing jQuery-based galleries (it makes no sense to reinvent the wheel there).

Answer 1

What you need to do is create / destroy your next / previous actions (this can be moving the mouse, scrolling a line, etc.).

You will need to determine in which direction you are heading, how many, and then use this number to remove x the number of elements from the end of the line. You will have to keep in mind that when you call back, the user will have to reload these elements.

Hopefully, the browser will cache images that increase download time and decrease the performance of your server.

From the point of view of saving things, my rule of thumb was “save as much as you can scroll on both sides of the field of view”, but this is more for general sliders. If you have a large load of items, I would add a couple more to allow a few clicks (I would also try to load a couple more times each time).

I would try to stop the user from involuntarily capturing 1000 items if he is in your control. If this is an option, you might consider something other than a cover for the presentation.

Answer 2

There is no laziness in the discharge you are describing. Rather, you want to immediately destroy the x number of objects when x exceeds the threshold value.

This can be easily implemented in an Array or ArrayCollection as a FIFO queue. Some pseudo codes:

 var array = new Array() function NewObjectInArrayCreate(object) if array.length > 1000 array.pop() else array.push(object)