Intersection Observer

Intersection Observer poskytuje spôsob, ako asynchrónne sledovať zmeny v prelínaní elementov či už voči sebe navzájom alebo voči viewportu (to čo užívateľ reálne vidí).

Na čo sa to dá použiť?

  • lazy loading obrázkov alebo iného obsahu
  • infinite scrolling
  • spúšťanie animácií na elementoch až keď začnú byť viditeľné

V minulosti by sme na toto použili onscroll event, ale to prináša veľa nevýhod:

  • môže to spomaľovať aplikáciu, nakoľko prepočty (napr. či element je, alebo nie je vo viewporte) prebiehajú na hlavnom vlákne (main thread)
  • prepočty prebiehajú vždy, keď nastane scroll event a ak je nami sledovaný element niekde veľmi "ďaleko" od aktuálneho viewportu, čo nie je optimálne
  • ak na stránke kontrolujeme viacero elementov, tak nám to môže veľmi spomaliť web/aplikáciu

Intersection observer nám teda umožňuje zefektívniť náš web a šetriť zdrojmi. Hlavne v dnešnej dobe by sme už nemali hneď načítavať všetky obrázky naraz, ale až keď sú vo viewporte. Takisto Google Lighthouse audit odporúča lazy-loadovať obrázky.

Použitie

Vytvorenie Intersection observera je jednoduché. Povedzme, že chceme sledovať viacero obrázkov v článku.

Zatiaľ sa s obrázkami nič nedeje a ani nezisťujeme, či sú alebo nie sú vo viewporte. Na to musíme vytvorenie observera upraviť nasledovne:

Čiže to či je element je alebo nie je vo viewporte zistíme cez intersectionRatio. Ak už potom načítame obrázok, tak nemá zmysel ho ďalej kontrolovať, takže zavoláme unobserve metódu.

Na vypnutie sledovania všetkého stačí zavolať observer.disconnect().

Nastavenie

Do observera môžeme dať aj vlastné nastavenie, konkrétne:

  • root: element, ktorý je použitý ako viewport pre zistenie viditeľnosti sledovaného elementu. Defaultná hodnota je null, čiže viewport prehliadača
  • rootMargin: niečo ako css margin, aj sa to tak nastavuje, čiže môžeme nastaviť napr. "10px 20px 10px 20px"
  • threshold: číslo alebo pole hodnôt hovoriacich o tom, pri akej viditeľnosti elementu sa zavolá callback funkcia definovaná v našom observeri. Čiže ak chceme, aby sa callback funkcia spustila už pri 50% viditeľnosti, tak nastavíme 0.5. Ak chceme, aby sa callback spustil napr. pri každých 25% viditeľnosti, tak threhsold nastavíme na [0.25, 0.5, 0.75, 1]

Podpora browserov

Všetky hlavné prehliadače až na IE a Safari podporujú IntersectionObserver. Safari to bude podporovať vo veľmi blízkej dobe, nakoľko už pridalo podporu do Safari Technology Preview, MacOS 10.14.4 beta a iOS 12.2 beta. Pre IE je možné použiť polyfill.