Prawdopodobnie spotkałeś się z blogami, na których avatary użytkowników w komentarzach wyświetlają się wraz z przewijaniem strony. Podobny efekt ujrzysz przewijając nasz ranking użytkowników http://www.webook.pl/wypracowania_ranking_uzytkownikow.php

Efekt taki można uzyskać np. za pomocą wtyczki Lazy Load Plugin for jQuery
http://www.appelsiini.net/projects/lazyload
Jednak wtyczka ta nie jest już rozwijana dlatego pokażę przykład stworzenia takiego efektu z wykorzystaniem jQuery Waypoints
http://imakewebthings.github.com/jquery-waypoints/

Do naszego dokumentu w sekcji <head> dołączamy bibliotekę jQuery oraz wtyczkę jQuery Waypoints

<head>

(...)
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="waypoints.min.js"></script>
</head>

Następnie musimy zmienić zawartość znaczników img dla tych obrazków, które chcemy aby były ładowane w momencie gdy są widoczne na ekranie. Warto zaznaczyć, że dzięki takiemu rozwiązaniu strona ładuje się szybciej ponieważ nie są wczytywane obrazki nie mieszczące się w oknie przeglądarki. Dopiero gdy użytkownik przewinie stronę w dół tak aby kolejne obrazki były widoczne to nastąpi ich wczytanie.

Tak powinien wyglądać znacznik img dla obrazka, który ma być ładowany gdy jest widoczny.

<img src="default.png" deferred="obrazek.png" />

default.png - to obrazek, który jest wyświetlany domyślnie. Zostanie on zastąpiony naszym właściwym obrazkiem w momencie gdy będzie widoczny na ekranie. default.png to np. domyślny avatar dla użytkowników.
obrazek.png - to docelowy obrazek, który ma się wyświetlać gdy jest widoczny w oknie przeglądarki. Odnosząc się do przykładu z avatarami, jest to właśnie avatar danego użytkownika.

Teraz gdy już określiliśmy, które obrazki mają być podmienione możemy wstawić przed znacznikiem </body> skrypt, który będzie wykonywał podmianę obrazków gdy te będą widoczne.

<script type="text/javascript">

$('img').waypoint(function(event, direction) {
var objImg = this;
setTimeout(function() {
var deferred = objImg.getAttribute('deferred');
if(deferred) {
$(objImg).animate({opacity: 0.1}, 250, function(){
objImg.src = deferred;
//console.log('Lazy loading img:', objImg.getAttribute('deferred'));
}).animate({opacity: 1.0}, 1000);
}
},250);
}, {
triggerOnce: true,
offset: function() {
return $.waypoints('viewportHeight') - $(this).height();
}
})
</script>

Gotowe! Możesz zobaczyć efekt przeglądając komentarze:
http://www.webook.pl/wypracowania_komentarze.php