Loading images on a web page using mootools when user scrolls page down

Question

Does anyone know a library that would automatically load images as user scrolls down? The idea is that I want to add user avatars on a wall dynamically when viewport changes. The related HTML would be something like this:

<div class="comment">
  <a class="avatar" rel="nick" href="users/nick"></a>
  <p>comment goes here</p>
</div>

When user scrolls the page down the html needs to be changed like this:

<a class="avatar loaded" rel="nick" href="users/nick">
  <img src="avatars/nick.png"/></a>

Additionally, caching images should be possible too to minimize the traffic to backend if at all possible.

Answer 1

Check out LazyLoad by David Walsh. There's also a LazyLoad for jQuery by a different author.