Zauważyłem to w wielu "nowoczesnych" witrynach internetowych (np. Na Facebooku i wyszukiwarce grafiki Google), gdzie obrazy poniżej części ekranu ładują się tylko wtedy, gdy użytkownik przewija stronę w dół na tyle, aby przenieść je do widocznego obszaru widoku ( po wyświetleniu źródła strona wyświetla X liczba <img>
znaczników, ale nie są one pobierane z serwera od razu ). Jak nazywa się ta technika, jak działa i w ilu przeglądarkach działa. Czy istnieje wtyczka jQuery, która może osiągnąć to zachowanie przy minimalnym kodowaniu.
Edytować
Bonus: czy ktoś może wyjaśnić, czy istnieje „onScrolledIntoView” lub podobne zdarzenie dla elementów HTML. Jeśli nie, jak działają te wtyczki?
javascript
jquery
html
scroll
lazy-loading
Salman A
źródło
źródło
Odpowiedzi:
Niektóre odpowiedzi tutaj dotyczą nieskończonej strony. Salman pyta o leniwe ładowanie obrazów.
Podłącz
Próbny
EDYCJA: Jak działają te wtyczki?
To jest uproszczone wyjaśnienie:
źródło
Dave Artz z AOL wygłosił świetną prelekcję na temat optymalizacji podczas zeszłorocznej konferencji jQuery Conference w Bostonie. AOL używa narzędzia o nazwie Sonar do ładowania na żądanie na podstawie pozycji przewijania. Sprawdź kod, aby dowiedzieć się, jak porównuje scrollTop (i inne) z przesunięciem elementu, aby wykryć, czy część lub całość elementu jest widoczna.
jQuery Sonar
Dave mówi o sonarze na tych slajdach . Sonar zaczyna się na slajdzie 46, a ogólna dyskusja na temat „obciążenia na żądanie” zaczyna się na slajdzie 33.
źródło
Wymyśliłem własną podstawową metodę, która wydaje się działać dobrze (na razie). Prawdopodobnie jest tuzin rzeczy, o których nie pomyślałem w niektórych popularnych skryptach.
Uwaga - to rozwiązanie jest szybkie i łatwe do wdrożenia, ale oczywiście nie jest świetne pod względem wydajności. Zdecydowanie spójrz na nowy Intersection Observer, o którym wspomniał Apoorv i wyjaśniony przez developers.google, jeśli wydajność jest problemem.
JQuery
Przykładowy kod html
Wyjaśnione
Kiedy strona jest przewijana, każdy obraz na stronie jest sprawdzany.
$(this).attr('data-src')
- jeśli obraz ma atrybutdata-src
i jak daleko te obrazy są od dołu okna.
$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)
dostosuj + 100 do tego, co lubisz (na przykład - 100)
var source = $(this).data('src');
- pobiera wartośćdata-src=
aka adresu URL obrazu$(this).attr('src', source);
- umieszcza tę wartość wsrc=
$(this).removeAttr('data-src');
- usuwa atrybut data-src (aby Twoja przeglądarka nie marnowała zasobów na obrazy, które zostały już załadowane)Dodawanie do istniejącego kodu
Aby przekonwertować HTML w edytorze wystarczy wyszukać i zamienić
src="
zsrc="" data-src="
źródło
Jest to całkiem ładny nieskończonego przewijania plugin tutaj
Nigdy sam takiego nie programowałem, ale wyobrażam sobie, jak to działa.
Zdarzenie jest powiązane z przewijaniem okna
Wywołana funkcja sprawdza, czy góra przewijania jest większa niż rozmiar okna
Wykonywane jest żądanie AJAX, określające, od którego wyniku # ma się zacząć, od ilu należy pobrać i wszelkie inne parametry niezbędne do pobierania danych.
Ajax zwraca pewną zawartość (najprawdopodobniej sformatowaną w formacie JSON) i przekazuje ją do funkcji loadnig.
Mam nadzieję, że to ma sens.
źródło
Użyj Lozad.js (tylko 569 bajtów bez zależności), który używa IntersectionObserver do leniwego ładowania obrazów.
źródło
Szwajcarski scyzoryk z funkcją leniwego ładowania obrazu to ImageLoader firmy YUI .
Ponieważ ten problem jest czymś więcej niż tylko obserwowaniem pozycji przewijania.
źródło
Ten link działa dla mnie w wersji demonstracyjnej
1. Załaduj wtyczkę jQuery loadScroll po bibliotece jQuery, ale przed zamykającym tagiem body.
2. Dodaj obrazy do swojej strony internetowej za pomocą atrybutu data-src HTML5. Możesz również wstawiać symbole zastępcze, używając zwykłego atrybutu src img.
3. Wywołaj wtyczkę na tagach img i określ czas trwania efektu zanikania, gdy obrazy są widoczne
źródło
Używam jQuery Lazy . Testowanie zajęło mi około 10 minut i godzinę lub dwie, aby dodać większość linków do obrazów na jednej z moich witryn internetowych ( CollegeCarePackages.com ). Nie mam żadnego związku z deweloperem (brak / zero) , ale zaoszczędziło mi to dużo czasu i zasadniczo pomogło poprawić nasz współczynnik odrzuceń dla użytkowników mobilnych i doceniam to.
źródło