Javascript Image loading Facebook style

so I was browsing through this page: http://360langstrasse.sf.tv/ It basically is a Javascript-Street View, but only allowing one direction. Therefore its kinda like playing a movie. When moving fast I notived that the images are grainy/pixelated, the same way as when browsing through Facebook.

I was wondering how to implement this? I tried with sending small base64 encoded images in the markup, and then draw it on a canvas until the 'real' image was loaded.

This worked fine, but left me thinking if this would indeed increase performance, or do sites like facebook do it differently?

Thanks in advance for any help.

Regards Jens

Edit: Or do they only display the images differently? Have another render process than usual? As I don't se开发者_StackOverflow中文版e any small images beeing loaded?

Edit 2: The below mentionewd option to load small images first is descriped nicely here: http://www.phpied.com/picassa-progressive-image-rendering/ But basically it is pretty simple.

I suppose caching (having in-page) bad-resolution images and fetching better is a real way to accomplish this.

The other way would be linking to small images in a normal way, and fetching bigger with JS - small images should load really fast, or you can subscribe to their load event (tricky in IE) and show the page (remove some overlay) once they are loaded.

BTW, instead of using canvas you can put base64 directly into src

<img src="data:image/png;base64,...

The answer is Progressive JPEG's! One create such with imagemagick for example. This way the browser renders progressively until aborted or completed. Those images may be bigger than normal images, but not always. Furthermore they provide the ability to be seen before completely downloaded.

Thanks for the help!