Flying Images är ett högpresterande plugin för lazy loading.

Hur fungerar lat lastning?

En normal HTML-bild ser ut så här:

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

Lazy loading plugins skriver om koden så här:

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

Som du märkte,srcattribut har ändrats tilldata-src.

För att nejsrc, webbläsaren laddar inte den här bilden initialt. Senare kontrollerar lite JavaScript-kod om bilden finns i viewporten (användarens viewport), och om den finns inuti,data-srcåterkommer till detsrcvilken webbläsare som utlöser nedladdning och visning av bilden.

Vad är native lazy loading?

Chrome kommer med "native lazy loading". Du kan läsa om det här.

Native lazy loading har fördelen att det inte finns något behov av JavaScript och är generellt mycket snabbare eftersom webbläsaren gör det "native".

Koden ser ut så här:

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

Vad är flygande bilder?

Flying Images är ett högpresterande plugin för lazy loading. Den använder webbläsarens "native" lazy loading om det är tillgängligt, annars använd vanlig JavaScript för lazy loading.

Flygande bilder kan också ladda bilder innan bilderna ens visas i visningsporten.

Är du rädd för lat laddning eftersom det skadar användarupplevelsen?

Hur skiljer sig flygande bilder från andra plugins för lata laddningar?

• Använder inbyggd lazy loading - använd inbyggd lazy loading om tillgängligt (stöds för närvarande endast i Chrome), annars använd JavaScript för att lata in bilder.
• Ladda bilder innan du går in i visningsporten - medan andra plugins laddar bilder när de är "inne i" visningsporten, laddar flygande bilder dem när de är på väg att gå in i visningsporten.
• Litet JavaScript - endast 0,5 KB, komprimerad, reducerad.
• Om så önskas kan du bara använda native – vill du endast stödja Chrome? Du kan byta till "native only", som inte injicerar JavaScript.
• Skriver om all HTML-kod - Missa aldrig en bild på grund av lat inläsning (även om den har lagts till av galleriplugins).
• Transparent fyllmedel - en liten transparent bas64 läggs till på alla bilder. Inget mer flimmer när du laddar bilder.
• Uteslut sökord - Nästan alla plugins för lazy loading har en uteslutningsfunktion, men flygande bilder kan också exkludera bilder från bildens föräldernod. Användbart om din bild inte har ett klassnamn.
• Stöder webbläsare med IE och JavaScript inaktiverade - alla bilder laddas omedelbart om det är Internet Explorer eller även om JavaScript är helt inaktiverat (mednoscriptmärka).