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:

Pinterest Loading Gif

"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:

Pinterest Loading Gif

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. 

Needless to say in about 30 lines of JavaScript we can reproduce a feature that can make any site look better. I leave you with the immortal words of Peter Gabriel: 

"in your eyes oh, I want to be that complete"

Posted 11 months ago by screeley
Embed This