Load Lazy - este un plugin jQuery care vă permite să pună în aplicare imagini de încărcare leneș, ceea ce este important pentru pagini cu o mulțime de imagini. Imaginile sunt descărcate ca sulul de utilizator prin intermediul paginilor. Utilizarea Load Lazy poate accelera pagina de încărcare și de a reduce încărcarea serverului.
Cum să utilizați?
Deoarece Load Lazy - jQuery plugin-ul, conectați mai întâi biblioteca jQuery, și apoi plugin-ul:
În continuare, trebuie să modificați codul HTML. Deoarece valoarea atributului src indica stub imagine - gif de culoare gri pe 1px dimensiune 1px. Deoarece valoarea atributului de date original, URL-ul indică această imagine.
De asemenea, trebuie să specificați dimensiunile lățimea imaginii și înălțimea ca atributele tag
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 41; ;
Acum, toate imaginile cu clasa leneș vor fi încărcate ca sulul pagina (vezi exemplul).
Pentru a preveni afișarea simultană a imaginilor și ascunde capac priza recomandată folosind CSS.
leneș # 123;
$ # 40; "Img.lazy" # 41;. spectacol # 40; # 41;. lazyload # 40; # 41; ;
Trecerea pragului
În mod implicit, imaginile sunt de încărcare în momentul apariției pe ecran. Dacă doriți ca acestea să fie descărcate înainte - a seta pragul. Pentru a pixelii de imagine sunt încărcate 200 înainte ca acestea sunt afișate pe ecran, setați pragul egal cu 200.
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 123;
Puteți gestiona orice jQuery-eveniment, cum ar fi un clic sau mouseover. În mod implicit, imaginile sunt încărcate în momentul afișării pe ecran. Mai jos este un exemplu pentru a descărca imagini după un clic de plug:
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 123;
Utilizarea efectelor
Implicit plugin-ul este în așteptare pentru o încărcare completă a imaginii și apoi provoacă spectacol () pentru a afișa. Puteți utiliza orice efect (a se vedea exemplul). EXEMPLU utilizați fadeIn-efect:
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 123;
Imagini din interiorul containerului
Puteți utiliza, de asemenea, imaginile într-un container, cum ar fi un div defilare. A se vedea, de exemplu, cu defilare orizontală și verticală.
#container # 123;
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 123;
Atunci când imaginea nu este în concordanță
După defilare starnitsy Lazy de încărcare în mod constant în căutarea de imagine descărcată. În acest ciclu, se verifică dacă imaginea apare în fereastra browser-ului vizibil. În mod implicit, ciclul se oprește după un timp de defilare în partea vizibilă a ecranului afișează prima imagine (care a fost anterior de vedere). Aceasta se bazează pe presupunerea că ordinea imaginilor de pe pagina este aceeași ca și în codul HTML. În unele cazuri, acest lucru nu poate fi cazul. Aveți posibilitatea de a controla comportamentul de încărcare prin setarea parametrului failure_limit.
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 123;
Setarea valorii failure_limit 10 înseamnă că plugin-ul ar trebui să se oprească în căutarea de imagini pentru a încărca după 10 imagini vor fi găsite în partea invizibilă a ferestrei.
Încărcați imagini după o anumită perioadă de timp
Codul de mai jos se așteaptă încărcarea completă paginii (nu numai conținutul HTML, dar toate imaginile și vizibile). 5 secunde după pagina este încărcată, imaginile sunt descărcate sunt în partea invizibilă a ferestrei browser-ului. A se vedea un exemplu de încărcare leneș.
$ # 40; funcție # 40; # 41; # 123;
Se încarcă imagini latente
Sunt momente când trebuie să starnitsu imagini ascunse. De exemplu, în timpul schimbărilor dinamice în condiții de vizibilitate a anumitor obiecte. Pentru a accelera Load Lazy ignoră imaginea ascunsă. Dacă doriți să descărcați o imagine ascunsă, setați skip_invisible la false.
$ # 40; "Img.lazy" # 41;. lazyload # 40; # 123;