Pinterest’s Colored Background Placeholders
Pinterest has built a rather clever image loading technique that utilizes the dominant color of an image as a placeholder while the browser readies the image. The following jif gives you an idea of how it works:
"Hey hunny, will you come look at this" has become the universal call for "let me show you something pretty on Pinterest" (at least in my household). While the pin is always pretty I’ve been constantly impressed with the little design tweaks that Pinterest adds between each beckoning.
I’ve been told that if you really want to impress a girl, you recreate a feature of the site she loves. I’m basically holding up a boom box on my girlfriend’s front lawn by writing this.
Pinterest has figured out that the default loading behavior for images is really ugly. The browser fills the image from top to bottom, stops at random places depending on the connection and generally looks like hell.
It would be nicer if the image just faded in when it was ready for your viewing pleasure. To boot, let’s use the dominant color of the image as a placeholder to make the transition even less jarring.
It’s _very_ pretty, so we decided to build it using Embedly’s tech. Here’s a jif of our version:
We built a tutorial on the site so you can view the demo here: embed.ly/docs/tutorials/background
A 3 sentence primer on how we built it:
We used Embedly’s Extract API to get the dominate color of the first image and used it to fill a placeholder div. Embedly’s Display API is then used to resize the image to fit in in the container. We listen for the “onload“ event on the image and then animate the opacity to 1.