Hogyan működik a lusta betöltés?
Egy normál HTML kép így néz ki:
<img src="sample.jpg" width="100%"/>A lusta betöltő bővítmények így írják át a kódot:
<img data-src="sample.jpg" width="100%"/>Ahogy észrevetted,srcattribútum erre módosultdata-src.
Mert nemsrc, a böngésző először nem tölti be ezt a képet. Később egy kis JavaScript kód ellenőrzi, hogy a kép a nézetablakban (a felhasználó nézetablakban) van-e, és hogy benne van-e,data-srcvisszatér erresrcmelyik böngésző indítja el a kép letöltését és megjelenítését.
Mi az a natív lusta betöltés?
A Chrome "natív lusta betöltés" funkcióval rendelkezik. Itt olvashatsz róla.
A natív lusta betöltés azzal az előnnyel jár, hogy nincs szükség JavaScriptre, és általában sokkal gyorsabb, mivel a böngésző ezt "natívan" teszi.
A kód így néz ki:
<img src="sample.jpg" loading="lazy" width="100%"/>Mik azok a repülő képek?
A Flying Images egy nagy teljesítményű lusta betöltő bővítmény. A böngésző „natív” lusta betöltését használja, ha elérhető, egyébként normál JavaScriptet használjon a lusta betöltéshez.
A Flying Images még azelőtt be tudja tölteni a képeket, hogy azok megjelennének a nézetablakban.
Félsz a lusta betöltéstől, mert rontja a felhasználói élményt?
Miben különböznek a repülő képek a többi lusta betöltő bővítménytől?
- Beépített lusta betöltést használ - használja a beépített lusta betöltést, ha elérhető (jelenleg csak a Chrome támogatja), ellenkező esetben használja a JavaScriptet a képek lusta betöltéséhez.
- Töltsön be képeket a nézetablak belépése előtt - Míg más beépülő modulok akkor töltik be a képeket, amikor "belül" vannak a nézetablakban, addig a repülő képek akkor töltik be őket, amikor éppen belépnek a nézetablakra.
- Apró JavaScript - csak 0,5 KB, tömörítve, kicsinyítve.
- Kívánt esetben csak natív nyelvet használhat – csak a Chrome-ot szeretné támogatni? Válthat „csak natív” módra, amely nem injektálja be a JavaScriptet.
- Átírja az összes HTML kódot - Soha ne hagyjon ki egy képet a lusta betöltés miatt (még akkor sem, ha azt a galériabővítmények adták hozzá).
- Átlátszó töltőanyag - minden képhez egy apró átlátszó base64 kerül. Nincs több villogás a képek betöltésekor.
- Kulcsszavak kizárása - Szinte minden lusta betöltő bővítmény rendelkezik kizárási funkcióval, azonban a repülő képek a kép szülőcsomópontjából is kizárhatnak képeket. Hasznos, ha a képnek nincs osztályneve.
- Támogatja a letiltott IE és JavaScript böngészőket - minden kép azonnal betöltődik, ha az Internet Explorer, vagy még akkor is, ha a JavaScript teljesen le van tiltva (a
noscriptcímke).
