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?

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:

1. Znajdź rozmiar okna i znajdź położenie wszystkich obrazów i ich rozmiary
2. Jeśli obraz nie mieści się w rozmiarze okna, zastąp go symbolem zastępczym tego samego rozmiaru
3. Gdy użytkownik przewinie w dół, a pozycja obrazu <przewiń + wysokość okna, obraz zostanie załadowany

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.

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

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Przykładowy kod html

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Wyjaśnione

Kiedy strona jest przewijana, każdy obraz na stronie jest sprawdzany.

$(this).attr('data-src') - jeśli obraz ma atrybut data-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ść w src=

$(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="

Jest to całkiem ładny nieskończonego przewijania plugin tutaj

Nigdy sam takiego nie programowałem, ale wyobrażam sobie, jak to działa.

1. Zdarzenie jest powiązane z przewijaniem okna

   $(window).scroll(myInfinteScrollFunction);

2. Wywołana funkcja sprawdza, czy góra przewijania jest większa niż rozmiar okna

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }

3. 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({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });

4. Ajax zwraca pewną zawartość (najprawdopodobniej sformatowaną w formacie JSON) i przekazuje ją do funkcji loadnig.

Mam nadzieję, że to ma sens.

Leniwe ładowanie obrazów przez dołączenie detektora do przewijania zdarzeń lub użycie setInterval jest wysoce niewydajne, ponieważ każde wywołanie metody getBoundingClientRect () zmusza przeglądarkę do zmiany układu całej strony i spowoduje znaczne szarpnięcie w witrynie.

Użyj Lozad.js (tylko 569 bajtów bez zależności), który używa IntersectionObserver do leniwego ładowania obrazów.

Szwajcarski scyzoryk z funkcją leniwego ładowania obrazu to ImageLoader firmy YUI .

Ponieważ ten problem jest czymś więcej niż tylko obserwowaniem pozycji przewijania.

Ten link działa dla mnie w wersji demonstracyjnej

1. Załaduj wtyczkę jQuery loadScroll po bibliotece jQuery, ale przed zamykającym tagiem body.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

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.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. Wywołaj wtyczkę na tagach img i określ czas trwania efektu zanikania, gdy obrazy są widoczne

$('img').loadScroll(500); // in ms

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.