Lazy loading obrázků

V rámci KT Theme Config, resp. komponenty KT_WP_Configurator je možné nastavit lazy loading obrázků (zpožděné načítání originálních obrázků až po načtení stránky), který se pak aplikuje na všechny thumbnaily, avatary a obrázky v obsahu příspěvků (obecně post_content). Celá pointa je v tom, že původní obrázky jsou nahrazeny vzorovým průhledným obrázkem o velikosti 1x1px a původní zdrojový obrázek se přesune do atributu data-src, odkud se pak pomocí JS skriptu unveil načte až po načtení stránky. Nicméně tuto funkcionalitu nelze pouze zapnout pomocí parametru, ale ještě je třeba udělat několik dalších kroků, včetně kódu v JavaScriptu:

V případě aktivace lazy loadingu obrázků je (obecně) velice vhodné nastavovat HTML img tagům rozměry, tzn. správně vyplňovat Width a Heith atributy.

1. aktivace v konfigurátoru

V definici konfigurace šablony je třeba aktivovat parametr lazy loadingu obrázků na komponentě KT_WP_Configurator metodou setImagesLazyLoading (tzn. v souboru kt/yours/requires/common/kt_theme_setup.inc.php):

2. vložení skriptu unveil

V definici konfigurace šablony je dále třeba vložit, resp. zajistit načítání skriptu unveil, ideálně v patičce stránky:

Všimněte si, že pro vložení skriptu unveil je použita konstanta KT_JQUERY_UNVEIL_SCRIPT. To protože je skript už zaregistrován a připraven v rámci core modulu WP Frameworku. Pomocí této konstanty je možné se na skript unveil odkazovat…

3. vložení vlastního skriptu šablony

Ještě do třetice zůstaneme v definici konfigurace šablony. Protože je potřeba rozšířit vlastní skript šablony (pokud nemáte, je třeba ho vytvořit) kódem, který se postará o aplikaci samotného lazy loadingu, resp. o náhradu původního obrázku po načtení stránky:

KT_XXX a kt-xxx stanovují předponu vlastního modulu v projektu podle konvence rozložení projektu a nazývání adresářů a souborů. Cesta k JS souboru by v tomto případě měla být kt/yours/js/kt-template-functions.js…

4. definice vlastního skriptu šablony

Nyní se můžeme přesunout do vlastního JS skriptu šablony a dodat kód, který zajistí již zmíněný lazy loadingu obrázků, resp. načtení původních obrázků:

Nebo to samé, ale trochu lépe i s vizuálním efektem:

A to je vše. Lazy loading by nyní měl být automaticky aktivní.

Nezapomeňte případně na důkladnou aktualizaci (Refresh) stránky v prohlížeči po editaci skriptů.



Odebírejte novinky z FW

Sledujte nás!

Tyto stránky využívají Cookies. Používáním těchto stránek vyjadřujete souhlas s používáním Cookies.Zjistit víceOK, rozumím