Pojawiające się obrazki

0

Cześć

Szukam pluginu jQuery bądź porady jak wykonać następującą rzecz:

Czasem na stronach, w galerii zdjęć obrazki nie są wczytywane od razu przy załadowaniu strony, ale wczytują się dopiero, gdy user zjedzie w dół strony. Generalnie chodzi o to, że jak na jednej stronie wyświetlamy pod sobą np. 100 obrazków, żeby nie zasysać ich na raz, a jedynie wtedy, gdy mają być widoczne na ekranie.

Mam nadzieję, że nie zamieszałem za bardzo :) Szukam tego w googlach drugą godzinę, ale nawet nie bardzo wiem, co wpisać.

0

Dzięki. Błyskawiczna pomoc.

0

A czy zna ktoś jeszcze tego typu biblioteki?

0

Niezależnie jakim bym zaawansowanym użytkownikiem nie był, nie można nakierowywać na rozwiązania których już nie powinno się stosować przy obecnym projektowaniu stron www.

0

Dlaczego tego rozwiązania nie powinno się stosować przy obecnym projektowaniu stron?

0
RFabianski napisał(a)

Dlaczego tego rozwiązania nie powinno się stosować przy obecnym projektowaniu stron?

Bo nowoczesne przeglądarki same o to dbają.

0
winerfresh napisał(a)
RFabianski napisał(a)

Dlaczego tego rozwiązania nie powinno się stosować przy obecnym projektowaniu stron?

Bo nowoczesne przeglądarki same o to dbają.

Ale mrowie użytkowników nie ma nowoczesnych przeglądarek...

Ten LazyLoad nie działa na mojej stronie (nie wiem czemu, ale mam już dość próbowania). Chcę spróbować napisać sam taką funkcję, ale nie wiem jak wywołać odpowiednie zdarzenie, kiedy obrazek (a właściwie miejsce na niego) będzie na ekranie. Jakieś pomysły?

EDIT: ok, mam taki kod, ale nie działa do końca jakbym chciał (nie wiem czemu):

$(window).scroll(function(){
    $('#lazy_gallery img').each(function(){     //dla kazdego obrazka w divie #lazy_gallery

        if($(this+'[original]'))    //jezeli element jeszcze ma atrybut "original"
        {
            if($(this).position().top<=($(window).height()))    //jezeli element jest widoczny
            {
                $(this).hide();                                 //ukryj go
                $(this).attr('src',$(this).attr('original'));   //nadal mu wlasciwe zrodlo
                $(this).removeAttr('original');                 //usun atrybut "ariginal"
                $(this).fadeIn(500);                            //pokaz element
            }
        }
    });
});

W HTML mam po prostu:

<div id="lazy_gallery">

<img src="images/blank.png" original="images/1.gif"><br>
<img src="images/blank.png" original="images/2.gif"><br>
<img src="images/blank.png" original="images/3.gif"><br>
<img src="images/blank.png" original="images/4.gif"><br>
...

</div>
0

zrób sobie atrybut data-original, bedzie bardziej jak html5, i użyj sobie biblioteki waypoint, mniej więcej tak:

$('#lazy_gallery img').waypoint(function() {
  $(this).attr('src',$(this).attr('data-original'));
  $(this).removeAttr('data-original');   
}, {triggerOnce:true, offset: '100%'});

a zabawa w fadeIn nie ma sensu.
1) przeglądarka nie ładuje ukrytych obrazków (z wyjątkiem firefoxa bodajże, który nie dość, że je ładuje to jeszcze wszystkie wpycha do ramu)
2) po zmianie atrybutu minie jakieś 2sekundy (zależy od łącza i jakie masz obrazki - ale chyba duże, że robisz coś takiego) zanim obrazek się załaduje. I taki niezaładowany obrazek ty pokazujesz z piękną animacją - bez sensu.

jeżeli koniecznie to chcesz to na funkcji z waypointa preloaduj obrazek (google Ci pomoze) i po jego załadowaniu (na zdarzeniu onload) go pokazuj.

0

Coś z tą biblioteką nie tak. Konsola błędów wywala komunikat "$.isWindow is not a function" i wywala całego javascripta.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0