Lazyloading

1. LAZY LOADING OBRÁZKOV

2. PREČO JE TO DOBRÉ?
• Optimalizácia a zrýchlenie vykreslenia stránky
• Načítavanie obrázkov až keď ich treba a len tie, ktoré
skutočne treba
• Načítavanie vhodných veľkostí podľa rozmeru zariadenia

3. BTTRLAZYLOADING
• http://bttrlazyloading.julienrenaux.fr/

4. VÝHODY
• lightweight jQuery knižnica = 8kb
• zisťovanie či je obrázok onscreen
• možnosť pridania až 4 veľkosti + možné nastavanie placeholder obrázkov
• možnosť pridať animácie pomocou animate.css
• retina ready

5. NOSCRIPT
• Pri práci s týmto pluginom vyhadzujeme z obrázka src tag a
funguje len so zapnutým js
• bez js sa nezobrazí nič, jedine ak vytvoríme <noscript> tag
a do neho vložíme zduplikovaný img

6. IMPLEMENTÁCIA
• bower install BttrLazyLoading —save
• pridať min.js a krátke css do kódu
• vymazať src z obrázka a pridať mu class bttrlazyloading + potrebné data atribúty
• <img class="bttrlazyloading" data-bttrlazyloading-threshold="200" data-
bttrlazyloading-sm-width="500" data-bttrlazyloading-sm-height="300" data-
bttrlazyloading-sm-src=“/images/image.jpg“ data-bttrlazyloading-
placeholder="" alt=“"/>

7. ĎAKUJEM ZA POZORNOSŤ