Šimon Raichl z Pilulka.cz vám v dnešním textu představí svou miniaturní, ale chytře navrženou knihovnu pro líné načtení obrázků a iframe.

Lazy loading jako takový představovat nemusím. Co ovšem představit chci, je moje knihovna zvaná MiniLazyload.

Motivace: Vytvořit opravdu hodně malou knihovnu s podporou nativního lazy loadingu

Proč další knihovna, když můžu použít již existující? Měl jsem pár požadavků, které žádná knihovna, kterou jsem našel, nesplňovala:

  • Datově co nejmenší (ideálně kolem 1 kB po gzipu).
  • Načtení placeholder obrázků, jestliže selže načtení původního obrázku.
  • Podpora responzivních obrázků (srcset a source ve značce <picture>).
  • Rozumná práce s nativním lazyloadem.
  • Aby neměla závislost na jQuery.

Ve výsledku se mi podařilo splnit všechny cíle, které jsem si vytyčil. Velikost je kolem 1 kB po gzipu a 2,4 kB bez něj. Placeholdery a responzivní obrázky také podporuje.

Co se týče nativního líného načtení: MiniLazyload se nespustí ve výchozím nastavení vůbec, pokud je nativní lazyload podporován.

Máte na výběr dvě možnosti. Jednak můžete udělat jednoduchý fallback pro prohlížeče s nativním lazyloadem s pomocí této knihovny, nebo použít flag IGNORE_NATIVE_LAZYLOAD a tím se použije ve všech prohlížečích naše javascriptová knihovna. Dále v textu ještě ukážeme více kódu.

Knihovna interně používá Intersection Observer, který je důležitý pro výkon lazy loadingu v prohlížečích bez podpory líného načtení. Pokud v daném prostředí není nalezen, stáhnout se obrázky okamžitě. Toto se bude týkat především Internet Exploreru.

Co knihovně naopak chybí? Líné načtení obrázků na pozadí a částí DOMu. Pokud to potřebujete podívejte se po knihovnách, které jsou doporučovány zde na Vzhůru dolů.

Implementace do webu

Jestliže pro bundlování používáte Webpack, pak můžete nainstalovat knihovnu pomocí NPM:

npm i minilazyload

My to pro potřeby ukázky uděláme „na prasáka“, přímým načtením v HTML:

<script src="https://cdn.jsdelivr.net/npm/minilazyload@2.1.0/dist/minilazyload.min.js"></script>

V JavaScriptu vytvoříme instanci MiniLazyloadu:

new MiniLazyload();

Pro nejběžnější využití by to mělo stačit. Knihovna bere informace o tom, které prvky načíst líně z HTML atributů pro nativní lazyloading (loading="lazy").

Můžeme ale nastavit tři parametry:

  • v prvním předáváme objekt s nastavením,
  • ve druhém CSS selektor pro líně načítané prvky,
  • ve třetím informaci, jestli se má ignorovat nativní lazyload a jestli se má vždy použít MiniLazyload.

V objektu s nastavením můžete nastavit vlastnosti pro Intersection Observer (rootMargin, threshold) a dále placeholdery, které se načtou, pokud selže načtení původního obrázku. Například následovně:

new MiniLazyload({
    rootMargin: "500px",
    threshold: .5,
    placeholder: "placeholder.png"
});

Nyní si můžete nastavit vlastní selektor. Ve výchozím nastavením se vybírají elementy, které mají atribut loading="lazy", tedy je u nich nastaveno nativní líné načtení. Pojďme toto změnit, například abychom vybírali elementy podle třídy .lazyload.

new MiniLazyload({
    rootMargin: "500px",
    threshold: .5,
    placeholder: "placeholder.png"
}, ".lazyload");

Co v prohlížečích s nativním lazy loadingem?

Pamatujete, když jsem zmiňoval, že jeden z mých požadavků bylo, aby knihovna uměla rozumně pracovat s nativním lazyloadem?

Pokud prohlížeč podporuje nativní líné načtení, MiniLazyload se nespustí. Máte dvě možnosti, jak dosáhnout spuštění i v prohlížečích s podporou.

První je jednoduchá. Do třetího parametru použít flag IGNORE_NATIVE_LAZYLOAD a MiniLazyload se spustí bez ohledu na to, jestli prohlížeč podporuje nativní lazyload.

Druhou možností je použít jednoduchý wrapper, který použije nativní lazyload, pokud ho prohlížeč podporuje. Naimportujte tento skript v HTML:

<script src="https://cdn.jsdelivr.net/npm/minilazyload@2.1.0/dist/usenativelazyload.min.js"></script>

Následně můžete zavolat funkci useNativeLazyload(), do které jako parametrem předáte instanci MiniLazyloadu:

useNativeLazyload(new MiniLazyload({
    rootMargin: "500px",
    threshold: .5,
    placeholder: "placeholder.png"
}, ".lazyload"));

Více uvidíte ve vloženém CodePenu:

Další CodePeny, kde můžete vidět MiniLazyload v akci:

Můžete příklady vyzkoušet v prohlížečích, které mají nativní lazyload a které ne a porovnat rozdíly mezi nimi.

Kompletní dokumentaci najdete na githubu této knihovny.

Komentáře