Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LAZY LOADING OBRÁZKOV
PREČO JE TO DOBRÉ?
• Optimalizácia a zrýchlenie vykreslenia stránky
• Načítavanie obrázkov až keď ich treba a len tie, kto...
BTTRLAZYLOADING
• http://bttrlazyloading.julienrenaux.fr/
VÝHODY
• lightweight jQuery knižnica = 8kb
• zisťovanie či je obrázok onscreen
• možnosť pridania až 4 veľkosti + možné na...
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č...
IMPLEMENTÁCIA
• bower install BttrLazyLoading —save
• pridať min.js a krátke css do kódu
• vymazať src z obrázka a pridať ...
ĎAKUJEM ZA POZORNOSŤ
Upcoming SlideShare
Loading in …5
×

Lazyloading

181 views

Published on

Lazyloading

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Lazyloading

  1. 1. LAZY LOADING OBRÁZKOV
  2. 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. 3. BTTRLAZYLOADING • http://bttrlazyloading.julienrenaux.fr/
  4. 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. 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. 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. 7. ĎAKUJEM ZA POZORNOSŤ

×