Cele mai bune modalități de a vă personaliza propria încărcare leneră pentru site-uri web
Publicat: 2019-07-29Lazy Loading este folosită pentru a amâna încărcarea unor imagini sau elemente de pagină web pentru mai târziu, atunci când un utilizator vizitează o pagină web. Acest lucru se face, de obicei, pentru imagini și elemente de site-uri de mai jos. Ideea este că, în loc să încărcați întreaga pagină web dintr-o singură mișcare, încărcați unele părți ale paginii web pe măsură ce utilizatorul continuă să deruleze în jos.
Avantajul principal al folosirii lazy Loading este că scade timpul de încărcare a întregului site web. Lazy Loading îmbunătățește performanța site-ului web și oferă o experiență mai bună pentru utilizator, încărcând mai întâi partea de sus, pe care vizitatorii pot începe imediat să o vizioneze sau să o citească. Când vizitatorii vin pe pagina dvs. web și trebuie să aștepte mult timp, își pierd interesul și pot dispărea. Cu toate acestea, dacă le oferiți ceva de vizionat sau de citit instantaneu în timp ce încărcați restul paginii web, îi puteți păstra conectați la site-ul dvs. Al doilea avantaj al lazy Loading este reducerea costurilor. Imaginile sunt descărcate numai dacă vizitatorul site-ului web vizitează acea anumită secțiune a site-ului. Prin urmare, dacă vizitatorul nu derulează în jos, se descarcă mai puține date pe dispozitivul său, economisindu-i bani.
Datorită acestor avantaje, lazy Loading este o modalitate excelentă de a îmbunătăți experiența și eficiența utilizatorului site-ului dvs. web.
Puteți personaliza lazy Loading pentru site-ul dvs. în două moduri – folosind proprietatea de fundal CSS sau folosind eticheta <img>. Cu toate acestea, metoda etichetei <img> este mai comună dintre cele două, deoarece această tehnică este ușor de utilizat.
Proprietatea etichetei <img>:
Când se utilizează eticheta <img>, browserul folosește atributul src pentru a declanșa încărcarea imaginii. Nu contează dacă este prima imagine sau a 100-a imagine din codul tău. Dacă browserul primește atributul src, va declanșa încărcarea imaginii. Deci, pentru a încărca leneș aceste imagini, adăugați adresa URL a imaginii la un alt atribut decât src. De exemplu, dacă plasați adresa URL a imaginii în atributul data-src, browserul nu declanșează încărcarea imaginii, deoarece atributul src este gol.
Acum că încărcarea inițială s-a oprit, trebuie să spunem browserului când ar trebui să fie încărcată imaginea. Dorim să declanșăm încărcarea imaginii de îndată ce aceasta intră în fereastra de vizualizare. Există două moduri de a verifica momentul intrării unei imagini în fereastra de vizualizare:
1. Utilizarea evenimentelor JavaScript:
În această tehnică, ascultătorii de evenimente sunt utilizați pentru redimensionarea, schimbarea orientării și evenimentele de defilare în browser. Evenimentul defilare este cel mai evident. Este folosit pentru a verifica când utilizatorul derulează pagina web. Evenimentele „orientationChange” și „redimensionare” sunt la fel de esențiale pentru încărcare leneșă. Evenimentul de redimensionare este declanșat atunci când există modificări ale dimensiunii ferestrei browserului. Evenimentul „orientationChange” are loc atunci când dispozitivul este rotit de la modul portret la modul peisaj sau invers. În aceste cazuri, numărul de imagini care sunt vizibile pe ecran se va schimba și, prin urmare, va trebui să declanșăm încărcarea imaginii.
Când are loc unul dintre aceste evenimente, căutăm toate imaginile prezente pe pagină care nu au fost încă încărcate. Prin verificarea tuturor imaginilor descărcate prezente pe pagina web care se află acum în fereastra de vizualizare, le aflăm pe cele care trebuie încărcate instantaneu. Acest lucru se realizează folosind partea de sus a derulării documentului curent, înălțimea ferestrei și decalajul superior al imaginii.
Dacă o imagine a intrat în vizualizare, luăm URL-ul imaginii din atributul data-src și o plasăm în atributul src care declanșează încărcarea imaginii. Apoi trebuie să eliminăm clasa lazy din imagine, deoarece această clasă face ca imaginile să se încarce leneș. Când toate imaginile sunt încărcate, ascultătorii evenimentelor sunt eliminați.
În cazul defilării, evenimentul de defilare se declanșează continuu. Deci, pentru creșterea performanței, putem adăuga un mic timeout care va accelera execuția de încărcare leneșă.
2. Folosind API-ul observator de intersecție:
Intersection Observer API este un API relativ nou în browsere. Această tehnică face foarte simplă detectarea momentului de intrare a unui element în fereastra de vizualizare. Această tehnică oferă performanțe excelente fără a utiliza matematică complexă în comparație cu metoda anterioară.
În primul rând, trebuie să atașăm observatorul la toate imaginile care necesită încărcare leneșă. Când API detectează că o imagine a intrat în fereastra de vizualizare, alege adresa URL din data-src și o plasează în atributul src folosind metoda „isIntersecting” pentru a declanșa încărcarea imaginii. După aceea, clasa leneșă este eliminată împreună cu eliminarea observatorului.
API-ul Intersection Observer funcționează rapid, fără ca site-ul să pară lent la defilare, în comparație cu utilizarea evenimentelor JavaScript. Cu tehnica de ascultare a evenimentelor, a trebuit să adăugăm un timeout care adaugă o ușoară întârziere. Cu toate acestea, API-ul Intersection Observer nu este acceptat de toate browserele. Prin urmare, ascultătorul de evenimente a devenit o alegere populară pentru utilizatori.
Proprietate de fundal CSS:
Pentru încărcarea imaginilor de fundal CSS, browserul trebuie să construiască CSS Object Model (CSSOM) împreună cu Document Object Model (DOM) pentru a decide dacă stilul CSS se va aplica unui DOM prezent în documentul existent. Dacă regula CSS nu se aplică elementului, browserul nu va încărca imaginea de fundal.
Cu această tehnică, aplicăm proprietatea CSS imagine de fundal atunci când un element vine în fereastra de vizualizare. Există un element cu ID bg-image (imagine de fundal) în CSS. Odată ce clasa lazy este adăugată la imagine, în tehnica CSS, suprascriem proprietatea bg-image și nu o facem.
Adăugarea clasei .lazy la #bg-image este preferată în CSS decât utilizarea numai #bg-image. Inițial, browserul aplică background-image: none elementului. Odată ce parcurgem pagina web, ascultătorii de evenimente sau Observatorul de intersecție detectează imaginea prezentă în fereastra și șterge clasa .lazy. Acest lucru nu este aplicabil în tehnica CSS deoarece proprietatea bg-image este aplicată elementului care declanșează încărcarea imaginii de fundal.
Așadar, iată cele două moduri prin care vă puteți personaliza propriul site web de încărcare leneșă. Ambele tehnici oferă rezultate excepționale. Cu toate acestea, dacă doriți o tehnică simplă, ar trebui să alegeți eticheta <img>. Există o mulțime de pluginuri disponibile pentru utilizatorii WordPress pentru a personaliza imaginile de încărcare leneșă și pe site-urile lor WordPress. Optimizarea imaginilor pentru site-ul dvs. WordPress folosind aceste plugin-uri, împreună cu încărcarea leneșă, va îmbunătăți performanța site-ului dvs., va oferi o experiență mai bună și va ajuta și la SEO.