jQuery plugins - Lazy-Load
júl 11

Lazy-Load

Képletöltés optimalizálása

Verzió: 1.5.0
Kiadás dátuma: 2009/12/24
Fejlesztő: Mika Tuupola
Liszensz: MIT

Bevezető

A Lazy Load plugin (szerintem) egy igen frappáns kiegészítő. Ez a plugin azoknak lehet hasznos, akik weboldalukon sok, nagyobb méretű képet jelenítenek meg: a plugin a az oldalból aktuálisan látható tartalmon (viewport) kívűl eső, azaz nem látható képeket nem tölti be, csak ha a viewport-ba kerül a kép, ezáltal redukálja a felesleges szerver forgalmakat.

Plusz, mindezen felül a képek betöltődéséhez effektek rendelhetők, azaz ha úgy szeretnénk, a képek nem csak hipp-hopp megjelennek!

Implementálás

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/lazyload.js"></script>
          

Deklaráció

Alapbeállításokkal:

            $(document).ready(function() {
              $("img").lazyload();
            });
          

Teljes paraméterlista

  • threshold: A monitoron túllógó tartalomból előre beolvashatunk képeket, hogy azok ne egyenként jelenjenek meg scrollozáskor. Ezáltal elrejthetjük a látogató elől a plugin működését (az egymás után felvillanó képeket), de mindeközben csökken a szerver terheltsége.
    A threshold paraméterrel pixelben adhatjuk meg annak a területnek a nagyságát, amelyet előre szeretnénk beolvastatni. (alapértelmezett: 0)
  • placeholder: a még be nem töltődött képek helyének kitöltésére szolgáló kép (pl. img/grey.gif)
  • failurelimit: scrollozást követően a plugin végignézi a képeket, hogy melyik esik a látható tartományba. Ez a folyamat addig tart, míg el nem jut az első képig, ami már kívül esik a viewport-on és onnantól megáll a feldolgozás. Ez gondot okozhat abban az esetben, ha az oldal felépítése olyan, hogy a képernyőn lévő képek a HTML kódban nem egymás után következnek (pl. egy több oszlopos elrendezésű oldal esetén). Ilyenkor előfordulhat, hogy a képek egy része nem fog betöltődni.
    Ennek kiküszöbölésére szolgál a faulirelimit paraméter, amellyel rábírhatjuk a plugin-t, hogy az első, viewport-on kívül eső kép után is folytassa a képek vizsgálatát a paraméterben megadott darabszámig.
  • event: esemény, melyre a képek betöltődnek (pl.: click, mouseover)
  • effect: a képek megjelenítéséhez használt hatás (pl.: fadeIn, slideDown)
  • container: segítségével lehetőség van rá, hogy a plugin-t nem az egész oldalon, hanem azon belül, egy scroll-ozható konténerben alkalmazzuk csak, pl. egy div-ben

Tippek

  • Firefox-ban úgy tapasztaltam, hogy ha az img tag-eknek nem adjuk meg a width és height attribútumokat, akkor a plugin nem működik tökéletesen!
  • Fontos megemlítenem, hogy ha a plugin-t a fenti leírás szerint beépítjük az oldalunkba, akkor minden, az oldalon található img tag-re kiváltja a kívánt hatást. Ez természetesen némely esetekben inkább illúzió romboló lehet, mint csodás.
    Ennek kiküszöbölésére a kívánt képekhez rendeljünk egy CSS osztályt:
                    <img class="lazy" src="01.jpg" alt="cím" width="200" height="160" />
                  
    Majd a plugin deklarációnál:
                    $(function(){
                      $("img.lazy").lazyload();"
                    });