Displaying/scrolling through heaps of pictures in the browser

Question

I want to be able to browse through heaps of images in the browser, fast. THe easy way (just load 2000 images and scroll) slows down the scrolling a lot, assumedly because there's too much images to be kept in memory.

I'd love to hear thoughts on strategies to be able to quickly scroll through 10000s of images (as if you were on your desktop) in the browser. What would expected bottlenecks be? How to address them? How to fake things so that the user experience is still good? Examples in the wild?

Answer 1

You'll want to use AJAX to dynamically load the pictures as you scroll. Basically, you'll load certain pictures based on how far down you've scrolled. Just don't forget to dump the ones that are off the screen so that the browser stays responsive.

If you just want to flip through lots of pictures one at a time you could preload the images that haven't been shown. Facebook albums preload the next image so that going to your next image is really fast.

Answer 2

I think RIA is your best bet here. Technologies like Flex and Silverlight were designed specifically to provide desktop-like behavior, while HTML/JS were never really intended to be used for that many images.

Additionally, if you haven't seen any Pivot demos yet, those are some good examples about how to maintain a good UX at massive scale. The best link I can find right now is unfortunately the sales-pitch video on the official site, but it still shows some neat interactions:

http://www.getpivot.com/