Jak działa i jak stworzyć Infinite Scroll?

Infinite scroll (w dosłownym tłumaczeniu nieskończone przewijanie) to alternatywa dla paginacji. Paginacja to mechanizm na stronie internetowej, który pozwala podzielić jej treść na osobne części. Strony takie zazwyczaj dzielimy z przyczyn technicznych i użytkowych. Dotyczy to najczęściej wszelkiego rodzaju list z wieloma elementami podrzędnymi i stosunkowo złożonym DOM. Załadowanie wszystkich elementów na raz marnuje transfer danych – tym bardziej kiedy w skład tych elementów wchodzą obrazy i/lub wideo – a przeglądarka przytłoczona ilością elementów, które trzeba natychmiast wyrenderować zazwyczaj się wtedy zacina.

Dzielenie długich list za pomocą paginacji jest więc czymś standardowym co wykorzystywano w technice tworzenia stron internetowych praktycznie od zawsze. Problem z paginacją polega na tym, że dłuższe klikanie po kolejnych liczbach lub ciągłe klikanie na przycisk „dalej” staje się uciążliwe. Paginacja na wąskim ekranie staje się mało użyteczna i nieatrakcyjna, bo zwyczajnie nie mieści się na nim w poziomie. Szczegóły co do tego jak działa i jak wygląda paginacja mogą być inaczej rozwiązane w różnych serwisach internetowych. Pamiętajmy, że paginacja musi być zaprezentowana odwrotnie w przypadku języków RTL.

Jak widać, same problemy. Infinite-scroll stara się rozwiązać lub ominąć te dylematy, które twórcy stron musieli rozwiązywać przez wiele lat. Z pewnością każdy Internauta doświadczył już jak działa Infinite-Scroll z perspektywy użytkownika. Serwisy społecznościowe używają tego rozwiązania do prezentowania feeda, blogi wyświetlają w ten sposób artykuły a nawet sama wyszukiwarka Google korzysta z niego do prezentacji wyników wyszukiwania.

W przypadku Infinite-Scroll elementy na stronie internetowej są dodawane i doładowywane wraz z przewijaniem viewportu przeglądarki. Kiedy strona wykryje, że użytkownik zbliża się do jej dolnej krawędzi ta pobiera kolejne treści i dodaje je do DOM aby były one załadowane i wyrenderowane na czas. Istnieje jeszcze wariant rozwiązania infinite-scroll z przyciskiem „załaduj więcej” ale to tak naprawdę szczegół, który różni się tylko tym co uruchamia funkcję, która odpowiada za ładowanie się kolejnych elementów listy.

Zalety Infinite Scroll

Nieskończone przewijanie ma wiele zalet w porównaniu do standardowej paginacji, która składa się z listy linków do poszczególnych podstron zawierających podgrupy danej listy.

• zwiększa użyteczność strony internetowej i komfort użytkowania, ponieważ użytkownik nie musi celować i klikać na zazwyczaj małe linki z podstronami,
• oszczędza transmisję danych, ponieważ nie dochodzi do pełnego przeładowania strony wraz z przeglądaniem kolejnych elementów,
• oszczędza zasobny serwera bo nie dochodzi do nadmiarowych zapytań HTTP, które miałby miejsce w przypadku ładowania osobnych stron,
• statystyki odwiedzin często wskazują na zmniejszenie się współczynnika odrzuceń i wydłuża średni czas sesji.

Przy tym wszystkim można śmiało stwierdzić, że technika Infinite Scroll nie ma praktycznie żadnych wad. Wdrożona poprawnie niesie wiele korzyści i poza dość złożoną optymalizacją nie generuje żadnych nowych problemów z perspektywy użytkowej bądź wydajnościowej.

Programowanie Infinite-Scroll

Jak zrobić infinte-scroll? Do stworzenia tego mechanizmu potrzebujemy strony internetowej z jakąkolwiek listą, której wysokość przekracza kilkakrotnie wysokość pola roboczego przeglądarki. Może to być lista nieuporządkowana wewnątrz <ul> bądź seria elementów <div>.

Ładowanie kolejnych elementów

Poszczególne części mechanizmu infinite-scroll można stworzyć w dowolnej kolejności. Na potrzeby tutorialu załóżmy, że zaczniemy od funkcji, która odpowiada za ładowanie kolejnych elementów. To jak pobieramy kolejne elementy zależy od back-endu i używanego CMSa. Może to być stworzony na potrzeby tutorialu plik JSON obiekt w JavaScript lub plik PHP. Na potrzeby artykułu stworzę skrypt PHP lista.php, który za pomocą parametru page będzie zwracał kolejne elementy w postaci surowego ale sformatowanego pod potrzeby konkretnej strony kodu HTML.

Kod strony u mnie wygląda tak:

<section id="articles">
<article>
<img src="obrazek1.jpg">
<h2>Artykuł 1</h2>
<p>Lorem ipsum...</p>
</article>
<article>
<img src="obrazek2.jpg">
<h2>Artykuł 2</h2>
<p>Lorem ipsum...</p>
</article>
...
</section>

Po stronie front-endu musimy napisać kilka linii, które będą pilnowały numeracji i dodawały kod HTML do wybranego kontenera:

var page = 1;
function infiniteScroll() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
         articles.insertAdjacentHTML('beforeend', this.responseText);
         page++;
      }
  };
  xhttp.open("GET", 'http://localhost/lista.php?page=' + page, true);
  xhttp.send();
}

Przypominam, że plik lista.php zwraca listę w postaci kodu HTML – dlatego skorzystałem z metody insertAdjacentHTML.

Wyzwalanie funkcji infiniteScroll()

To czy wyzwalać funkcję po kliknięciu na przycisk bądź reagować na samo przewijanie zostawiam każdemu do rozważenia. W przypadku chęci reagowania na wciśnięcie przycisku trzeba dodać przycisk (w tym przykładzie z klasą infinitescroll) i dodać taki kod:

[].forEach.call(document.querySelectorAll('.infinitescroll'), function (el){
    el.addEventListener('click', function (e) {
       e.preventDefault();
       infiniteScroll();
    })
 });

W przypadku chęci zareagowania na przewinięcie do dołu powinien zadziałać taki kod:

window.onscroll = function(ev){
   if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      infiniteScroll();
   }
};

Przykłady jak zwykle można dostosować do własnego użytku. Wspomniałem, że mechanizm nieskończonego przewijania infinite scroll aktywuje się nieco przed tym jak użytkownik zobaczy dolną krawędź strony dlatego od wartości document.body.offsetHeight można odjąć z góry przewidzianą wartość w pikselach np. 400px.

Dobrym pomysłem będzie usunięcie przycisku, zmiana jego etykiety bądź wyłączenie go w przypadku kiedy odkryjemy, że nie ma więcej artykułów. Można też wyświetlić informację użytkownikowi, że widział już wszystkie artykuły. Wystarczy, że przed ponownym ładowaniem danych przetestujemy długość wartości this.responseText:

if (this.responseText/length > 0) {
...   
} else{
   articles.insertAdjacentHTML('beforeend', "<span>To już wszystkie artykuły!</span>");
}

Przycisk można łatwo wyłączyć i zmienić jego napis:

infiniteScrollButton = document.querySelector('.infinitescroll');
infiniteScrollButton .innerHTML = "Nie ma więcej artykułów";
infiniteScrollButton .disabled = true;

Efekt końcowy:

Infinite Scroll a SEO

Jeżeli infinite scroll zwiększa użyteczność strony internetowej (a przez to zwiększy ruch i wydłuży czas odwiedzin) to oczywiście będzie miał pozytywny wpływ na pozycjonownaie. Należy jednak pamiętać, że infinite scroll w takiej postaci wymaga jeszcze wielu udoskonaleń. Paginacja z perspektywy SEO to linkowanie wewnętrzne. Jeżeli usuniemy paginację przykładowe artykuły mogą być nieosiągalne dla robotów indeksujących. Powinniśmy zatem dodać standardową paginację w tagach <noscript>. Dzięki temu strona będzie dostępna dla tych, którzy z jakiegoś powodu wyłączyli obsługę JavaScriptu oraz dla robotów indeksujących:

<noscript>
   <ul class="paginacja">
      <li><a href="lista?page=1">1</a></li>
      <li><a href="lista?page=2">2</a></li>
      <li><a href="lista?page=3">3</a></li>
      ...
   </ul>
</noscript>

Infinite Scroll a UX

Aby stworzony infinite scroll faktycznie był pozbawiony wad, musimy rozwiązać jeszcze parę problemów z perspektywy UX. W naszym tutorialowym przykładzie nie zmienia się adres URL głównej strony na której funkcjonuje infinite-scroll. To powoduje, że niemożliwe jest zapisanie sobie postępu przewijania i ponowne korzystanie z takiej listy może być frustrujące. Można to rozwiązać za pomocą history.pushState. Została też obsługa przycisku wstecz/dalej w przypadku kiedy infinite scroll wczytywałby konkretne artykuły a nie tylko ich listy. W przypadku bardzo obszernych aplikacji będziemy musieli zastosować najciekawszą technikę optymalizacyjną, która umożliwi sprawnie funkcjonować przeglądarce w przypadku załadowania bardzo wielu elementów. Aktualizację tutorialu wykonam w przyszłości a ewentualne komentarze w tym temacie z pewnością przyspieszą termin jej publikacji.

Podsumowanie

Jak widać zasada działania nieskończonego przewijania znanego pod nazwą infinite scroll jest prosta w działaniu. To dlatego rozwiązanie to zyskało taką popularność i jest stosowane na wielu stronach internetowych. Miejmy na uwadze szczegóły UI, UX oraz SEO, o których musimy pamiętać chcąc uniknąć potencjalnych problemów do jakich niedokładna implementacja infinite-scroll może doprowadzić. Istnieje wiele gotowych rozszerzeń dla znanych systemów CMS, które wprowadzają funkcjonalność infinite-scroll przy stosunkowo małym nakładzie pracy.