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:

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Automatický lazy-loading YouTube videí

Hotové řešení lazy-loadingu YouTube videí

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

Lazy loading obrázků

Lazy loading obrázků

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Lightboxová vstupní stránka

Lightboxová vstupní stránka ihned po načtení

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Změna vzhledu stránky

Změna designu bez znovunačtení stránky

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Komentáře