CSS Preloader

A modern weboldalak egyik jellegzetes stíluselemei a nagyfelbontású, jó minőségű képek. Az ilyen weboldalak döntő hányada használ valamilyen képváltót, úgynevezett slidert, ezeknek a képeknek az időzített cserélésére, hogy minél jobb hangulatot érjenek el, illetve minél több információt adjanak át a látogatóknak.

Ennek viszont van egy hátulütője is, mégpedig az, hogy amíg a böngésző igyekszik betölteni a sliderben szereplő képeket, addig a slider tároló eleme üresen áll és nem jelenít meg képet. Erre két megoldás is létezik.

1.) Fix háttér

A slidernek beállítunk egy fix hátteret. Ezzel azt érhetjük el, hogy amíg a slider betölti a diavetítéshez szükséges képeket, addig egy fix háttérképet nézhet a látogató a slider tároló elemében. Majd amikor a slider befejezte a betöltést, már azokat a képeket jeleníti meg a tároló, melyek a diavetítéshez kellenek.

2.) Betöltést jelző animáció

Ennek a megoldásnak csak a képzeletünk szabhat határt. Az ötletes és látványos animációkat betölthetjük akár egy gif animációként is, vagy készíthetünk CSS segítségével is animációt. Most ezt szeretném bemutatni neked, de a letölthető demoban mind a három megoldásra mutatunk példát.

Az interneten számos, gondosan megírt leírás található. Én ebből vettem példát, majd alakítottam át, hogy tényleg egyedi legyen:
http://webdesign.tutsplus.com/tutorials/creating-a-collection-of-css3-animated-pre-loaders--cms-21978

További kreatív ötletek HTML5 és CSS3 preloader készítéséhez:
http://codepen.io/collection/HtAne/
http://tobiasahlin.com/spinkit/

A megoldás lényege, hogy a CSS preloadert a slider tárolójában helyezzük el, a diavetítéshez használt képek tárolóján kívül. Példánkban felhasználtunk egy "preloader_container" nevű preloader tárolót, majd ebben elhelyeztünk 2 további tárolót. A "preloader_logo" tartalmazza a legfelső rétegen látható logot, mely ennek a segítségével külön animálható CSS-el. Éppen ezért oldható meg az, hogy míg a mögötte lévő réteg folyamatosan forog, a logo-t tartalmazó réteg egyhelyben áll. A "preloader" nevű tároló pedig maga az animációt megjelenítő réteg.

HTML

<div id="preloader_container">
	<div id="preloader_logo"></div>
	<div id="preloader"></div>
</div>

CSS

#preloader_container {
	width: 100%;
	height: 388px;
	padding-top: 136px;
	text-align: center;
	display: inline-block;
}

#preloader {
	display: inline-block;
	position: relative;
	width: 75px;
	height: 75px;
	background-color: #e1572e;
	border-radius: 50%;
	animation:  preloader_animation 2.5s infinite linear;
}

#preloader_logo {
	display: inline-block;
	position: absolute;
	z-index: 2;
	top: auto;
	left: auto;
	width: 75px;
	height: 75px;
	background: url('http://www.ruander.hu/images/white-logo.png') no-repeat;
}

#preloader:after {
	display: inline-block;
	position: absolute;
	width: 115px;
	height: 115px;
	border-top: 10px solid #42738e;
	border-bottom: 10px solid #42738e;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-radius: 50%;
	content: '';
	top: -20px;
	left: -20px;
	animation: preloader_after 2.5s infinite linear;
}

@keyframes preloader_animation {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(180deg);}
	100% {transform: rotate(360deg);}
}

@keyframes preloader_after {
	0% {border-top: 10px solid #42738e;border-bottom: 10px solid #42738e;}
	50% {border-top: 10px solid #0095cb;border-bottom: 10px solid #0095cb;}
	100% {border-top: 10px solid #42738e;border-bottom: 10px solid #42738e;}
}

Az alábbi JavaScript kódrészlet pedig azt a célt szolgálja, hogy amikor a teljes weboldal minden elemével együtt már betöltött, akkor fokozatos elhalványítással rejtse el a preloadert, majd helyére jelenítse meg a slider képeit. Az áttűnés végeztével pedig meg is szüntetjük a preloader DOM elemeit, hiszen innentől már nem lesz rá szükségünk és felesleges, hogy a háttérben folyamatosan számolásokat végezzen az animáció folytonosságához.

JavaScript

<script type="text/javascript">
$(document).ready(function() {
	$('#preloader_container').fadeOut(500, function() {
		$('#preloader_container').remove();
		$('#slider_container').fadeIn(500);
	});
});
</script>

A megoldás előnye a gif animációval szemben, hogy a betöltése nem eredményez újabb szerver hívást, ezzel spórolni tudunk a betöltési időn, illetve a későbbi átalakítások lényegese egyszerűbbek, hiszen bármit át tudunk írni a CSS-ben hozzá.

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.