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 [b]Lazy Load Plugin for jQuery[/b] http://www.appelsiini.net/projects/lazyload Jednak wtyczka ta nie jest już rozwijana dlatego pokażę przykład stworzenia takiego efektu z wykorzystaniem [b]jQuery Waypoints[/b] http://imakewebthings.github.com/jquery-waypoints/

Do naszego dokumentu w sekcji dołączamy bibliotekę [b]jQuery[/b] oraz wtyczkę [b]jQuery Waypoints[/b] [code=xml] (…)

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. [code=xml][/code]

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 skrypt, który będzie wykonywał podmianę obrazków gdy te będą widoczne. [code=js] $(‘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(); } }) [/code]

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