Skip to content

Commit

Permalink
more prominent demo
Browse files Browse the repository at this point in the history
  • Loading branch information
schlosser committed May 6, 2016
1 parent cd38869 commit 9152188
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
Progressive Image Grid (`pig.js`)
=================================
#### → → [Play with a demo][feeding-dan]

Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms. Here's what you get:
Arrange images in a responsive, progressive-loading grid managed in JavaScript using CSS transforms, with one lightweight library. Here's what you get:

1. **Performance**: The `pig.js` grid 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.js` intelligently loads and unloads images as you scroll down the page, to ensure ensure speedy rendering of images, smooth scrolling, and minimal network activitiy.
2. **Responsiveness**: Images are loaded in JavaScript, at different resolutions depending on screen size. Also, because images are positioned using CSS transforms, images smartly re-tile when you shrink or expand the browser window.
3. **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), Medium (by way of some [dope blog posts](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)).
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](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)).

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](https://feeding.schlosser.io/).
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][feeding-dan]. That site is also [on GitHub][feeding-dan-gh].

## Getting Started

Expand Down Expand Up @@ -280,3 +281,5 @@ Enable the Pig library by beginning to listen to scroll and resize events, loadi
Disable the Pig library by removing event listeners set in `Pig.enable()`.
[download]: https://github.com/schlosser/pig.js/releases/download/v0.1/pig.min.js
[feeding-dan]: https://feeding.schlosser.io/
[feeding-dan-gh]: https://github.com/schlosser/feeding-dan/

0 comments on commit 9152188

Please sign in to comment.