Photowall: Scroll based data prefetch

Photowall is part 1 of a secret project I am working on (secret only since I am not sure part 2 will work, so I’d rather not declare yet what its about šŸ˜‰ ). This component on its own is an exercise in data-prefetch. The idea is to load data as the user scrolls to the end of the current set rather than ask the user to click on a “more photos” link. In this case, the component is feeding off Flickr data.

Type in a search word inside the text input and hit enter. Once the first set of data has loaded in, use the scrubber below the photos to scrub through the photos. Note: Data prefetch is triggered on mouse-up rather than mouse-move, I need to implement that in the final version.


Under the hood, I have a class called PagedDataService that computes which page of the remote data the user is on (Flickr apis support paged data, with each call out asking for a certain number of photos and a page offset, so page 1 has 0 to 1 x pagesize photos, page has 2 x pagesize, etc. Right now my pagesize is 60. ). The code also uses a PagePolicy class that the container looks at to see when the more data should be fetched. For example, in this case, I have asked the container to get more photos when the user is about 18 photos (6 columns) away from the last photo in the set.

There is no optimization of the code here yet, so I am not managing the photo renderers that aren’t visible to the user (which would free up memory). Another optimization would be to reuse renderers rather than create new ones like I do for every photo. Finally, a priority queue for the load requests would be great here.

So much for part 1, on to part 2. Stay tuned :).

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: