Intersection Observer: Jak zjistit, že je prvek vidět?

Intersection Observer je javascriptové API, které umožní asynchronně hlídat protnutí plochy konkrétního prvku s plochou jiného prvku nebo viewportu. To se hodí hlavně pro potřeby odloženého načtení (lazy loadingu) obrázků nebo jiných prvků.

Nativně jej už podporuje většina prohlížečů. V době psaní textu Observer nefunguje jen ve všech verzích Safari a pak v Internet Exploreru. Viz CanIUse.com.

Překážka pro použití to ale není, protože existují polyfilly. Nebo prostě můžete udělat detekci vlastnosti a Observer nabídnout jen většině uživatelů prohlížečů, které Intersection Observer umí.

Intersection Observer samozřejmě nevymysleli jen pro potřeby lazy loadingu. Skvělý je také pro spouštění animací při vstupu prvku do viewportu. Nebo pro implementaci „nekonečné stránky“ - načítání nových položek po narolování stránky na konec.

Použití je jednoduché:

// Nastavíme hlídače
var observer = new IntersectionObserver(callback, options);

// Řekneme mu, které prvky má hlídat
var contentImages = document.querySelector('.content img');
observer.observe(contentImages);

Vlastnosti

Nejprve příklad:

var options = {
  root: document.querySelector('#main'),
  rootMargin: '-50px 0px',
  threshold: 0.5
};

Vysvětleme si jednotlivé vlastnosti:

• root – element, jehož plochu má náš prvek překrývat. Obvykle chceme použít celý viewport, takže nastavte root: null nebo root neuvádějte – je to výchozí chování.
• rootMargin – vnější okraj kolem root, kdy se hlídač aktivuje. V případě lazyloadingu se samozřejmě hodí mít nějaký náskok a začít obrázky načítat chvilku před tím, než jsou ve viewportu. rootMargin: '-50px 0px' tohle udělá s předstihem padesáti pixelů.
• threshold – práh protnutí. Lidsky řečeno: jaká část prvku musí jít vidět, aby se hlídač aktivoval. threshold: 0.5 aktivuje při padesátiprocentním překryvu. Výchozí hodnota je 0, což je pro lazyloading optimální. Prostě se aktivuje hned při překrytí první řady pixelů.

Odkazy:

• Detailní technikálie jsou na MDN.
• Using the Intersection Observer API to Trigger Animations and Transitions – Alligator.io.
• Lazy Loading Images with Intersection Observer – Cory Dowdy.

Lazy loading obrázků s IOLazy

Při nasazování lazy loadingu na Vzhůru dolů jsem našel malinkou knihovnu, která využívá Intersection Observer – IOLazy.

Je fajn věc pro všechny, kteří se tak moc nekamarádí s Javascriptem a zároveň nechtějí využívat běžné lazyloadovací knihovny, který jsou výkonnostně nepříliš optimalní.

Knihovnu vložíte do stránky:

<!-- intersection observer polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
<!-- the iolazy load library -->
<script src="dist/js/iolazy.min.js" defer></script>

Nezapomeňte samozřejmě na polyfill. Jak jsem psal, potřebujete jej hlavně pro Safari a Internet Explorery.

K obrázkům přidáte data- atributy a třídu:

<img data-src="your/image.jpg" alt="your alt text" class="lazyload" >

Nakonec knihovnu spustíte:

document.addEventListener("DOMContentLoaded", function () {
  new IOlazy();
});