Flying Images is een krachtige plug-in voor lui laden.

Hoe werkt lui laden?

Een normale HTML-afbeelding ziet er als volgt uit:

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

Luid ladende plug-ins herschrijven de code als volgt:

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

Zoals je hebt gemerkt,srcattribuut is gewijzigd indata-src.

Want neesrc, laadt de browser deze afbeelding in eerste instantie niet. Later controleert een kleine JavaScript-code of de afbeelding zich in de viewport bevindt (de viewport van de gebruiker) en of deze erin staat,data-srckeert daarop terugsrcwelke browser het downloaden en weergeven van de afbeelding activeert.

Wat is native lui laden?

Chrome wordt geleverd met "native lazy loading". Je kunt er hier over lezen.

Native lazy loading heeft het voordeel dat er geen JavaScript nodig is en is over het algemeen veel sneller omdat de browser het "native" doet.

De code ziet er als volgt uit:

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

Wat zijn vliegende beelden?

Flying Images is een krachtige plug-in voor lui laden. Het gebruikt de "native" lazy loading van de browser, indien beschikbaar, gebruik anders gewoon JavaScript voor lazy loading.

Flying Images kan ook afbeeldingen laden voordat de afbeeldingen zelfs maar in de viewport verschijnen.

Ben je bang voor lui laden omdat het de gebruikerservaring schaadt?

Waarin verschillen vliegende afbeeldingen van andere lazy loading-plug-ins?

• Maakt gebruik van ingebouwde lazy loading - gebruik ingebouwd lui laden indien beschikbaar (momenteel alleen ondersteund in Chrome), gebruik anders JavaScript om afbeeldingen lui te laden.
• Laad afbeeldingen voordat u de viewport opent - terwijl andere plug-ins afbeeldingen laden wanneer ze "in" de viewport zijn, laden vliegende afbeeldingen ze wanneer ze op het punt staan ​​de viewport binnen te gaan.
• Klein JavaScript - slechts 0,5 KB, gecomprimeerd, verkleind.
• Indien gewenst kunt u alleen native . gebruiken - wilt u alleen Chrome ondersteunen? U kunt overschakelen naar "alleen native", die geen JavaScript injecteert.
• Herschrijft alle HTML-code - Mis nooit meer een afbeelding vanwege lui laden (zelfs als deze is toegevoegd door galerij-plug-ins).
• Transparante vulstof - aan alle afbeeldingen is een kleine transparante base64 toegevoegd. Geen flikkering meer bij het laden van afbeeldingen.
• Trefwoorden uitsluiten - Bijna alle plug-ins voor lui laden bieden een uitsluitingsfunctie, maar vliegende afbeeldingen kunnen ook afbeeldingen uitsluiten van het bovenliggende knooppunt van de afbeelding. Handig als je afbeelding geen klassenaam heeft.
• Ondersteunt browsers met IE en JavaScript uitgeschakeld - alle afbeeldingen worden onmiddellijk geladen als het Internet Explorer is of zelfs als JavaScript volledig is uitgeschakeld (met behulp vannoscriptlabel).