Articole

Flying Images este un plugin de încărcare leneș de înaltă performanță.

Cum funcționează încărcarea leneșă?

O imagine HTML normală arată astfel:

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

Pluginurile de încărcare leneră rescriu codul astfel:

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

După cum ați observat,srcatributul a fost schimbat îndata-src.

Pentru că nusrc, browserul nu încarcă inițial această imagine. Mai târziu, un mic cod JavaScript verifică dacă imaginea se află în fereastra (portul de vizualizare al utilizatorului) și dacă este în interior,data-srcse întoarce la astasrcce browser declanșează descărcarea și afișarea imaginii.

Ce este încărcarea leneșă nativă?

Chrome vine cu „încărcare leneră nativă”. Puteți citi despre asta aici.

Încărcarea nativă lazy are avantajul că nu este nevoie de JavaScript și este în general mult mai rapidă, deoarece browserul o face „nativ”.

Codul arată astfel:

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

Ce sunt imaginile zburătoare?

Flying Images este un plugin de încărcare leneș de înaltă performanță. Folosește încărcarea leneră „nativă” a browserului, dacă este disponibilă, altfel utilizați JavaScript obișnuit pentru încărcare leneră.

Imaginile zburătoare pot încărca imagini chiar înainte ca imaginile să apară în fereastra de vizualizare.

Ți-e frică de încărcare leneșă pentru că dăunează experienței utilizatorului?

Cum sunt imaginile zburătoare diferite de alte plugin-uri de încărcare leneșă?

  • Utilizează încărcare leneșă încorporată - utilizați încărcare leneră încorporată, dacă este disponibilă (în prezent, acceptată numai în Chrome), altfel utilizați JavaScript pentru încărcarea leneră a imaginilor.
  • Încărcați imagini înainte de a intra în fereastra de vizualizare - în timp ce alte plugin-uri încarcă imagini când sunt „în interiorul” vizorului, imaginile zburătoare le încarcă atunci când sunt pe cale să intre în fereastra.
  • JavaScript mic - doar 0,5 KB, comprimat, redus.
  • Dacă doriți, puteți utiliza numai nativ – vrei să accepti doar Chrome? Puteți trece la „numai nativ”, care nu injectează JavaScript.
  • Rescrie tot codul HTML - nu pierdeți niciodată o imagine din cauza încărcării leneșe (chiar dacă este adăugată de pluginuri de galerie).
  • Umplutură transparentă - la toate imaginile este adăugată o mică bază transparentă64. Gata cu pâlpâirea la încărcarea imaginilor.
  • Excludeți cuvinte cheie - Aproape toate pluginurile de încărcare leneră oferă o funcție de excludere, cu toate acestea, imaginile zburătoare pot exclude și imaginile din nodul părinte al imaginii. Util dacă imaginea dvs. nu are un nume de clasă.
  • Acceptă browsere cu IE și JavaScript dezactivate - toate imaginile sunt încărcate instantaneu dacă este Internet Explorer sau chiar dacă JavaScript este complet dezactivat (folosindnoscriptetichetă).