« A Google room with two doors | Main | Quora answer on Programming advice for novices »

Do it with D3 - Lazy Loading Images

I'm lucky to have stumbled upon Mike Bostock's excellent D3 library when I was looking for a good implementation of force-directed layouts for certain kinds of graphs. I now use it for many more things than graph rendering. Data Driven Documents are indeed the future of the web and HTML5 apps, and d3.js is sure to have an enormous impact.

As an example of how D3 helped me greatly simplify things I'd hitherto put together using plain ol' javascript and jQuery, Here's an adaptation in D3 of a lazy image loader I'd written last year. The old code was over 50 lines long and not as simple as befits an obviously simple task such as lazy loading.

Now, using D3, the code is an awesome 10 lines of pure simplicity. See the demo here. (View Source to copy).



TrackBack URL for this entry:

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


This page contains a single entry from the blog posted on December 3, 2011 5:52 PM.

The previous post in this blog was A Google room with two doors.

The next post in this blog is Quora answer on Programming advice for novices.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.35