Front-end fejlesztés

Sok kép, mégis gyors weboldal

Egy weboldal betöltésének sebessége kettő dolog miatt is nagyon fontos. Az első természetesen az, hogy a látogató weboldalunkra jutva, egy gyorsan betöltődött weboldallal találkozzon. Másodszor pedig, a Google algoritmusában megtalálható egy ezen alapuló rangsorolási tényező. Tehát nagy hangsúlyt, kell fektetnünk erre. Megtehetnénk azt, hogy képeink minőségét tömörítjük, de ennek hatására egy rosszabb minőségű képet kapunk és bizony vannak olyan esetek, amikor a lényeg éppen a részletekben van. Olyan esetekben, amikor sok nagyobb képet kell betöltenünk megoldásként a jQuery Lazy Load-oz hívhatjuk segítségül.

Ezen kiegészítő segítségével tulajdonképpen nem minden képet töltünk be egyszerre, csak amit éppen lát a látogató. Amikor lejjebb görget, folyamatosan töltődnek be a képek, így a látogató egy gyors weboldalt kap eredményül. Nézzétek meg a demot, hogy lássátok pontosan miről is van szó.

jQuery Lazy Load használata

Első körben szükségünk van egy jQuery-re és a Lazy Load kiegészítőre.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.lazy").lazyload();
      });
  </script>

HTML kódunk azonban egy kicsit változni fog. Src attribútumunknak, nem képünket fogjuk megadni, hanem egy 1x1px-es gifet és data-original attribútumunk fogja megkapni az eredeti képünket.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">

Ezzel tulajdonképpen meg is vagyunk. Fontos, hogy a grey.gif fájl legyen a megfelelő helyen. Ez lesz az a gif, ami megjelenik, amíg nem tölt be a kép egyébként.

jQuery Lazy Load WordPress plugin

Szerencsére a ayn WordPress bővítmény fejlesztő kolléga létrehozta erre nekünk már a bővítményt, amit másodpercek alatt használatba tudunk venni és egy sor kódot nem kell illesztenünk sehová, hogy képeink optimálisan töltődjenek be. Egyszerűen telepítsük a bővítményt egy szimpla felmásolással majd aktiváljuk és már készen vagyunk a beüzemeléssel.

Bővítmény letöltése