Wczytywanie się obrazków dopiero podczas przewijania strony Opcje

[1q2w3e4r]

Witam,

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

Pozdrawiam

[toaspzoo]

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

[1q2w3e4r]

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.

[by_ikar]

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ść.

[Damonsson]

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 (IMG:style_emoticons/default/wink.gif)

[1q2w3e4r]

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 (IMG:style_emoticons/default/wink.gif)

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ć.

[by_ikar]

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ą (IMG:style_emoticons/default/wink.gif) może nie przywiązali do tego zbytniej uwagi, bo mają wersję strony dla urządzeń mobilnych.