2011-12-19 13 views
6

i pobierz wtyczkę lazyload jquery z tej strony http://www.appelsiini.net/projects/lazyload.Jquery lazyload funkcja wtyczki i wywołania zwrotnego

z ich dokumentów Nie znalazłem, że można użyć dowolnego wywołania zwrotnego lub nie z wtyczką lazyload.

załóżmy mój html wyglądać

<div id="gallery" class="busy"><img src="blah.jpg" /></div> 
<div id="gallery" class="busy"><img src="blah2.jpg" /></div> 
<div id="gallery" class="busy"><img src="blah3.jpg" /></div> 

mojego skryptu jak

$("#gallery img").lazyload(); 

klasie zajęty będzie zajęty tylko ustawić obraz na środku div. więc potrzebuję wywołania zwrotnego i od wywołania zwrotnego muszę wykryć pobieranie obrazu ukończone lub nie, jeśli zostało zakończone, po prostu usuwam klasę z odpowiedniego nadrzędnego elementu div tagu graficznego.

więc proszę mi pokazać sposób realizacji wywołania zwrotnego za pomocą lazyload, a także potrzebujesz przykładowego kodu, dzięki któremu mogę usunąć klasę z odpowiedniego nadrzędnego elementu div tagu graficznego.

dzięki

+1

znacznik HTML jest nieprawidłowy, identyfikator musi być unikalny dla różnych elementów div –

+0

Pytałem o inny problem, czy istnieje funkcja wywołania zwrotnego, która jest uruchamiana za każdym razem po zakończeniu pobierania każdego z obrazów? –

Odpowiedz

12

Miałem to samo pytanie. Czy ktoś szukał, przyszedł tutaj i znalazł odpowiedź. To jest wat, który mam i działa dla mnie:

$(this).lazyload({ 
    effect : 'fadeIn', 
    load : function() 
    { 
     console.log($(this)); // Callback here 
    } 
}); 

Mam nadzieję, że to pomoże!

+1

Cudownie! Działa płynnie. – dnns

+0

Zdarzenie do uruchomienia Ładowanie Więcej informacji http://www.appelsiini.net/projects/lazyload – zloctb

0

Odpowiedź Ricka de Graafa prawie zrobiła to za mnie.

Problemem dla mnie było: Ładunek jest wywoływany dla obrazów zastępczych również. Co w moim przypadku było problemem. Chciałem dodać klasę tylko do końcowych załadowanych obrazów. Dodałem to, aby zadziałało:

jQuery("img.lazy").lazyload({ 
      effect : 'fadeIn', 
      load : function() 
      { 
       if (jQuery(this).attr("src") != "data:image/gif;base64,R0lGODlhZABlAIAAAPn5+QAAACH5BAAAAAAALAAAAABkAGUAAAJ0hI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBnZVQAAOw==") { 
        jQuery(this).addClass("visible-image");     
       } 
      } 
     }); 

Jeśli załadowany obraz to dane: obraz, nic nie rób, dodaj swoją klasę.

Powiązane problemy