Lazy Loading (Lenivé načítání)

 

Lazy Loading (Lenivé načítání): Realizace lenivého načítání obrázků zahrnuje změny ve způsobu, jakým jsou obrázky na stránce načítány. Klasicky se obrázky načítají okamžitě, jakmile je načtena stránka. S lenivým načítáním se toto chování mění:

• Attribut loading="lazy": Pro každý <img> tag můžete přidat atribut loading="lazy". Tímto způsobem prohlížeč ví, že by měl obrázek načítat pouze tehdy, když se nachází ve viditelné oblasti (viewportu). Například:

• <img src="obrazek.jpg" alt="Obrázek" loading="lazy">
  

Přednačítání (Preloading): Přednačítání se většinou provádí pomocí HTML a CSS. Zde je návod, jak to lze realizovat:

• HTML Tag <link>: Ve hlavičce HTML dokumentu můžete přidat <link> tag s atributem rel="preload" pro každý obrázek, který chcete přednačítat. Tímto způsobem říkáte prohlížeči, že by měl tento zdroj předem stáhnout. Například:

  html

<link rel="preload" href="obrazek.jpg" as="image">

CSS Background Image: Pokud obrázky nejsou přidány přímo do HTML pomocí <img> tagu, ale jsou použity jako pozadí pomocí CSS, můžete také v CSS specifikovat přednačítání. Například:

.obrazek {
  background-image: url('obrazek.jpg');
}

JavaScript Preloading: Pokud chcete dynamicky načítat obrázky pomocí JavaScriptu, můžete použít metodu new Image() a nastavit src atribut na URL obrázku. To může být užitečné, pokud načítáte obrázky na základě nějaké události.

2. • var obrazek = new Image();
     obrazek.src = 'obrazek.jpg';
     

Tímto způsobem můžete implementovat obě techniky na své webové stránky a zlepšit tak rychlost načítání obsahu pro uživatele.

 

Lazy Caching

"Lenivé ukládání" do mezipaměti: Lazy caching se týká ukládání do mezipaměti (caching) dat a zdrojů až v okamžiku, kdy jsou skutečně potřeba. Namísto okamžitého ukládání všech dat do mezipaměti se část dat ukládá až ve chvíli, kdy jsou vyžádána poprvé. To může snížit inicializační čas a zvýšit efektivitu využití mezipaměti.