Pokud na webové stránce zobrazujeme větší počet obrázků, respektive pokud načítání obrázků znatelně zpomaluje načtení webové stránky, je vhodné obrázky načítat asynchronně až po načtení a zobrazení celé stránky.
Díky existenci hotových řešení je realizace snadná.
Pro jQuery lze použít např. plugin s názvem JAIL (jQuery Asynchronous Image Loader Plugin).
Použití pluginu JAIL
1. Po vložení jQuery:
/lib/jquery.js
2. Vložíme samotný script jail.js::
/src/jail.js
3. Aktivujeme plugin:
$(function(){
$('img.lazy').jail();
});
4. Vložíme obrázky:
Místo:
<img src="/images/image1.jpg">
použijeme:
<img class="lazy" src="/images/blank.gif" data-src="/img/image1.jpg"> <noscript><img src="/images/image1.jpg"></noscript>
Třída nastavená obrázku class=“lazy“ musí odpovídat třídě nastavené v inicializaci pluginu $(‚img.lazy‘).jail();.
Tag <noscript> zajistí zobrazení obrázku v případě vypnutého JavaScriptu.
A máme hotovo.
Chování pluginu JAIL lze dále nastavit podle dokumentace pluginu: https://github.com/sebarmeli/JAIL