Witam,

Jak zrobić aby obrazki wczytywały się dopiero podczas przewijania strony?
Na allegro w liście przedmiotów maja taki efekt.

Pozdrawiam

Ja bym na stronie zamieścił divy od określonej wysokości (niewidoczne) i podpiął do nich akcję onmouseover / jquery mouseenter
I dynamicznie

Tak, ale co wtedy gdy np. ktoś będzie miał wyłączony JS lub np. nie będzie tego obsługiwać czy coś?
Proszę o konkretny przykład.

Inaczej niż w JS takiego efektu nie osiągniesz. onmouseover to jest zdarzenie związane z myszką i musiałbyś najechać myszką aby odsłonić konkretny obrazek. Dodatkowo nie musi być taki obrazek w jakimś div'ie żeby móc w ten sposób na niego reagować. Jak już to onscroll. A na allegro ten efekt, to doczytywanie obrazków w ajaxie, nie wiem dokładnie czy poprzez sprawdzenie pozycji ekranu na stronie, czy też poprzez onscroll, ale tak czy inaczej jest to zrobione w javascript. Wyłącz wejdź na allegro i sam się przekonaj.

Ktoś ma wyłączone js? Trudno, nie będzie miał dodatkowego efektu. A strona dalej będzie miała swoją funkcjonalność.

Lazy Load - tak się to nazywa.

http://www.appelsiini.net/projects/lazyload/enabled.html

Tyle ludzi ma wyłączone JS, ile ma czarno białe monitory

No tak, ale teraz trzeba brać pod uwagę userów, którzy korzystają z iphone oraz komórek.

W tym przykładzie niestety jest to robione tak:

[HTML] pobierz, plaintext 
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
[HTML] pobierz, plaintext 

Gdzie główny src="" jest to obrazek ładowania, a data-original to obrazek właściwy. Więc jeśli ktoś ma wyłączony JS lub nie obsługuje tego to zobaczy same loadery.

Szukałem przykładów na oryginalnym src="" ale nie mogę znaleźć. Czyli chyba nie da sie tego tak zrobić. Trudno będę musiał taki przykład wykorzystać.

No niestety nie da się tego inaczej zrobić. W samym html tego się nie zrobi, co najwyżej w js. A to co jest w JS będzie działać na iphone czy innych systemach mobilnych z przeglądarką która obsługuje javascript. Możliwe że opera mini może mieć jakieś problemy, nie wiem jak tam ona stoi z js, ale taki efekt można łatwo zamienić. Przykładowo, normalnie podajesz w src link do obrazka, i takiemu obrazkowi nadajesz klasę. Następnie w JS pobierasz zawartość src i podmieniasz na grey.gif, i dodajesz do takiego obrazka data-original z linkiem do oryginalnego obrazka. A dopiero po tym zabiegu, dodać stosowną klasę na której będzie działać lazyload. W efekcie, otrzymasz dla ludzi którzy mają włączony JS efek ładowania obrazków na bieżąco, a dla ludzi bez js, obrazki załadują się normalnie. W jqery kilka linijek kodu aby coś takiego wykonać.

Tyle że obrazki nie koniecznie trzeba dawać w img, a można dawać je jako tło innych elementów html.

BTW na allegro jak się wyłączy js, niestety obrazki się nie ładują może nie przywiązali do tego zbytniej uwagi, bo mają wersję strony dla urządzeń mobilnych.