Zpožděné načtení obrázku, až když je potřeba

JavaScript

V JS je situace poměrně jednoduchá. Stačí při vykonávání nějaké akce přidávat elementy s obrázky (<img>) nebo elementy s pozadím v CSS (background).

Například pro donačítání obrázků při dojetí na konec stránky (tzv. lazy loading) stačí porovnávat offsetTop a scrollTop:

if (element.offsetTop < document.documentElement.scrollTop + document.body.scrollTop) {
	// nějaká akce
}

Sečtení document.documentElement s document.body slouží ke srovnání chování napříč prohlížeči.

Existují i různá komplexnější řešení v jQuery, například:

• Element ‘inview’ Event Plugin (demo)

CSS

Máme-li třeba nějaké rozsáhlé :hover menu, kvůli kterému by by se zbytečně musel stahovat datově náročný obrázek, dává smysl jej načítat až při použití.

Použití display: none

element {display: none; background: url(obrazek.png)}
element:hover {display: block}

Nabízelo by se, že u elementu s display: none nebudou prohlížeče pozadí stahovat, leč dle monitorování síťových přenosů ve vývojářských nástrojích všech rozšířených prohlížečů to tak funguje jen v Opeře a Firefoxu; Internet Explorer a Google Chrome takto skrytý obrázek stáhnou. Řešení není ani naposicování elementu někam pryč (position: absolute; left: -9999px; top: -9999px}.

Všude funkční řešení je obrázek připojovat až při :hoveru, tedy:

element {display: none}
element:hover {display: block; background: url(obrazek.png)}

Funkční ukázka

Načte se při :hoveru