Javascript + HTML: How can I efficiently display a large list of images?

Question

Some context: I'm making a chrome extension that will make use of a large list (potentially thousands) of image urls. The list will have urls for many image types.

I want to give users the ability to browse these images by seeing the actual image, and not just seeing the url. Right now I just iterate through the list, and for each url, I attach an element to a scrollable element. This results in aa scrollable list of images. Some are gifs, some png, some jpeg etc. I'm worried that if the list gets very large, there will be a lot of lag and the process will take up a lot of bandwidth.

Is there a good way to do something like this efficiently (ie. reduce lag and loading times)?

Ideally I would have a thumbnail for each url.

Answer 1

Obviously the thousands of images are not going to be all displayed at once in a single view but as you described, in a long list. The approach I would take would be to buffer the images and display them on scroll. This would require you to calculate how many images you can store in a row and have at least two or three rows buffered ahead and behind of the current scroll position. The only downside to this approach is that it could be tricky to get a smooth scrolling solution it the thumbnail rows are large.