Képek előtöltése CSS segítségével

---

Egy érdekes trükköt szeretnék bemutatni, csupán CSS használatával, mellyel kicsit érdekesebbé, izgalmasabbá tehetjük oldalainkat, képeink bemutatását.

Egy kicsit becsapós a dolog mert valójában nincs semmilyen előtöltés. Annyit akarunk elérni, hogy ha sok képet kellene betöltenünk, például egy galériába, akkor amíg a kép töltése folyamatban van egy úgynevezett preloader (előtöltő) jelezze, hogy a kép töltődik.

Az elmélet egyszerű.
Fogunk egy divet, megadjuk neki a méreteket, beledobjuk a képet és a div hátterének beteszünk egy animált gif-et.
Így amíg a kép nem töltődik be, a mozgó gif, vagyis az előtöltő lesz látható, mikor a kép letöltődött eltakarja a gifet.
Így azt a hatást keltjük mintha egy valódi preloader töltené be a képeinket.
Nézzünk rá egy példakódot, alább látható a HTML amit beszéltünk feljebb, külön-külön div-ekbe elhelyeztük a képeinket:

<div id="galeria">
	<div><img src="kep1.jpg"></div>
	<div><img src="kep2.jpg"></div>
	<div><img src="kep3.jpg"></div>
	<div><img src="kep4.jpg"></div>
	<div><img src="kep5.jpg"></div>
	<div><img src="kep6.jpg"></div>
</div>

Most jöjjön a css:

 
#galeria div{
	width: 200px;
	height: 200px;
	background-image: url(preloader.gif);
	background-repeat: no-repeat;
	background-position: center;
}

És már el is értük a kívánt hatást.

Ennek a trükknek akkor van igazán látható haszna, ha sok, vagy nagy méretű képeket kell betöltenünk egy oldalra.