Jak funguje líné načítání?
Normální HTML obrázek vypadá takto:
<img src="sample.jpg" width="100%"/>Lazy loading plugins přepisují kód takto:
<img data-src="sample.jpg" width="100%"/>Jak jste si všimli,srcatribut byl změněn nadata-src.
Protože nesrc, prohlížeč tento obrázek zpočátku nenačte. Později malý kód JavaScript zkontroluje, zda je obrázek ve výřezu (výřez uživatele) a zda je uvnitř,data-srcse k tomu vracísrckterý prohlížeč spustí stahování a zobrazení obrázku.
Co je nativní líné načítání?
Chrome přichází s „nativním líným načítáním“. Můžete si o tom přečíst zde.
Nativní líné načítání má tu výhodu, že není potřeba JavaScript a je obecně mnohem rychlejší, protože to prohlížeč dělá „nativně“.
Kód vypadá takto:
<img src="sample.jpg" loading="lazy" width="100%"/>Co jsou létající obrázky?
Flying Images je vysoce výkonný plugin pro líné načítání. Využívá „nativní“ líné načítání prohlížeče, pokud je k dispozici, jinak pro líné načítání používejte běžný JavaScript.
Létající obrázky mohou také načítat obrázky dříve, než se obrázky vůbec objeví ve výřezu.
Bojíte se líného načítání, protože to poškozuje uživatelský zážitek?
Jak se létající obrázky liší od jiných pluginů pro líné načítání?
- Používá vestavěné líné načítání - použijte vestavěné líné načítání, pokud je k dispozici (momentálně podporováno pouze v Chrome), jinak použijte JavaScript k línému načítání obrázků.
- Před vstupem do výřezu načtěte snímky - zatímco jiné pluginy načítají obrázky, když jsou „uvnitř“ výřezu, létající obrázky je načítají, když se chystají do výřezu vstoupit.
- Malý JavaScript - pouze 0,5 KB, komprimováno, zmenšeno.
- V případě potřeby můžete použít pouze nativní – chcete podporovat pouze Chrome? Můžete přepnout na „pouze nativní“, který nevkládá JavaScript.
- Přepíše veškerý HTML kód - nikdy nezmeškáte obrázek kvůli línému načítání (i když je přidán pluginy galerie).
- Průhledná výplň - ke všem obrázkům je přidána malá průhledná základna64. Už žádné blikání při načítání obrázků.
- Vyloučit klíčová slova - Téměř všechny zásuvné moduly pro pomalé načítání poskytují funkci vyloučení, ale létající obrázky mohou také vyloučit obrázky z nadřazeného uzlu obrázku. Užitečné, pokud váš obrázek nemá název třídy.
- Podporuje prohlížeče s vypnutým IE a JavaScriptem - všechny obrázky se načtou okamžitě, pokud je to Internet Explorer nebo i když je JavaScript zcela zakázán (pomocí
noscriptštítek).
