allworldrating.com
Članci

Flying Images je dodatak za lijeno učitavanje visokih performansi.

Kako funkcionira lijeno učitavanje?

Normalna HTML slika izgleda ovako:

<img src="sample.jpg" width="100%"/>

Dodaci za lijeno učitavanje prepisuju kod ovako:

<img data-src="sample.jpg" width="100%"/>

Kao što ste primijetili,srcatribut je promijenjen upodaci-src.

Jer nesrc, preglednik u početku ne učitava ovu sliku. Kasnije, mali JavaScript kod provjerava je li slika u okviru za pregled (korisnički okvir za pregled), i da li je unutra,podaci-srcvraća se na tosrckoji preglednik pokreće preuzimanje i prikaz slike.

Što je nativno lijeno učitavanje?

Chrome dolazi s "nativnim lijenim učitavanjem". O tome možete pročitati ovdje.

Izvorno lijeno učitavanje ima prednost u tome što nema potrebe za JavaScriptom i općenito je mnogo brže budući da preglednik to radi "nativno".

Kod izgleda ovako:

<img src="sample.jpg" loading="lazy" width="100%"/>

Što su leteće slike?

Flying Images je dodatak za lijeno učitavanje visokih performansi. Koristi "prirodno" lijeno učitavanje preglednika ako je dostupno, u suprotnom koristite uobičajeni JavaScript za lijeno učitavanje.

Flying Images također može učitati slike prije nego što se slike uopće pojave u okviru za prikaz.

Bojite li se lijenog učitavanja jer šteti korisničkom iskustvu?

Po čemu se leteće slike razlikuju od ostalih dodataka za lijeno učitavanje?

  • Koristi ugrađeno lijeno učitavanje - koristite ugrađeno lijeno učitavanje ako je dostupno (trenutačno podržano samo u Chromeu), inače koristite JavaScript za lijeno učitavanje slika.
  • Učitajte slike prije ulaska u okvir za prikaz - dok drugi dodaci učitavaju slike kada su "unutar" okvira za prikaz, leteće slike ih učitavaju kada se spremaju ući u okvir za prikaz.
  • Mali JavaScript - samo 0,5 KB, komprimirano, smanjeno.
  • Po želji možete koristiti samo native – želite podržati samo Chrome? Možete se prebaciti na "samo izvorni", koji ne ubacuje JavaScript.
  • Prepisuje sav HTML kod - nikada ne propustite sliku zbog lijenog učitavanja (čak i ako je dodaju dodaci galerije).
  • Prozirno punilo - svim slikama je dodana sićušna prozirna baza64. Nema više treperenja prilikom učitavanja slika.
  • Izuzmi ključne riječi - Gotovo svi dodaci za lijeno učitavanje pružaju značajku isključivanja, međutim leteće slike također mogu isključiti slike iz roditeljskog čvora slike. Korisno ako vaša slika nema naziv klase.
  • Podržava preglednike s onemogućenim IE i JavaScriptom - sve slike se učitavaju odmah ako je Internet Explorer ili čak i ako je JavaScript potpuno onemogućen (koristećinoscriptoznačiti).

Zanimljivi Članci