Published on May 06, 2016.
- Performance: The
pig.jsgrid specializes in displaying a large number of photos. While a more traditional approaches would paginate images, or use AJAX to load and insert buckets of additional images onto the page,
pig.jsintelligently loads and unloads images as you scroll down the page, to ensure ensure speedy rendering of images, smooth scrolling, and minimal network activitiy.
- User Experience: Images are previewed with a small placeholder image that is scaled and blured. When the image loads, it gives the effect that the image was brought into focus (it's super cool!).
A lot of this is stolen straight from Google Photos (by way of observation and some creative use of the Chrome Inspector) and Medium (by way of some dope blog posts).
If you want to see
pig.js in action, check out the site that motivated it in the first place: a catalog of everything I ate in 2015: feeding.schlosser.io. That site is also on GitHub.