Robimy preloader
Przegl?daj?c jaki?? czas temu strony natrafi??em w sieci na genialnie prosty "preloader" wczytywanych np. w galerii obrazk??w. Ot???? jako t??o wczytywanej grafiki zastosowano inny plik graficzny, kt??ry jako animowany gif sprawia?? wra??enie "wczytywania si?" grafiki. Oczywi??cie gifek niewiele wa??y?? i raz wczytany na kolejnych stronach natychmiast zachowywa?? sie jak prawdziwy preloader.
W przyk??adzie poni??ej zastosuj? klas? chocia?? nic nie stoi na przeszkodzie aby preloadera u??ywa? do wczytywania wszystkich obrazk??w:
-
.preloader {
-
background: url(obrazki/loading.gif) no-repeat 50% 50%;
-
}
Jak wida? gif nie b?dzie powielany w przestrzeni zajmowanej przez obrazek i zosta?? wy??rodkowany zar??wno w pionie jak i poziomie. W tym przypadku do wczytywanego obrazka dodajemy klas? czyli:
-
<img class="preloader" src="obrazki/loading.gif" width="100″ height="100″ alt="ladowany_obrazek" />
Oczywi??cie do klasy mo??emy dopisa? szereg innych cech definiuj?cych obrazek, chocia??by border: 0 itd… Je??li kto?? zechcia??by wczytywa? wszystkie pliki graficzne z "preloaderem" wystarczy w pliku css wpisa?:
-
img {
-
background: url(obrazki/loading.gif) no-repeat 50% 50%;
-
}
I w??a??ciwie to tyle. Proste, zrozumia??e, ??atwe do wykorzystania. Przyk??ad u??ycia "preloadera" mo??na zobaczy? przegl?daj?c zamieszczone w blogu fotki 
Jak to dzia??a? Poni??ej niby-obrazek, kt??rego nie ma na serwerze ale "preloader" sygnalizuje, ??e jest wczytywany.
Na stronie www.ajaxload.info/ mo??na wygenerowa? wiele rodzaj??w animowanych gif??w oraz wybra? ich kolor i kolor pod??o??a, na kt??rym b?d? wy??wietlane.
* * *
-
Napisał: as — 12/07/2006 @ 11:52
Bardzo ciekawy i prosty efekt. Mia??em tylko problem z "zdobyciem" tego gifa, co tak ??adnie si? "??aduje". Chyba, ??e czego?? niezauwa??y??em w artykule, dzi?ki i zobowi?zuje si? zagl?da? cz???ciej.
Pozdrawiam -
Napisał: Michu — 10/08/2006 @ 14:13
Witam… Niestety nie znam css. Czy m??g??bym prosi? o plik css z ustawieniami wczytywania wszystkich grafik z tym preloaderem? (CSS dopiero zaczynam :))
-
Napisał: zama — 15/08/2006 @ 14:58
Przecie?? powy??ej poda??em jak to osi?gn??
-
Napisał: Micha?? — 11/10/2006 @ 14:43
I ja mam z tym problem, mo??na by prosi? o do??aczenie w jakiej?? postaci konkretnego przyk??adu z pogl?dem kodu ???
-
Napisał: Grzesiek — 22/01/2007 @ 20:16
spoczko:) czego tu nie rozumie?:D wszystko dok??adnie opisane:P a gif jest tutaj pzdr
-
Napisał: frex — 26/09/2007 @ 16:01
witam w preloaderrze jest blad
otoz w znaczkiu img zamiastsrc=??obrazki/loading.gif?
powinna bys sciezka do obrazka ladowanego
a nie w znaczkiku alt ktory jest jedynie alternatywa prawda?
-
Napisał: lemarpol — 04/09/2008 @ 01:34
Ciekawe i pomocne
Gratuluje i dziekuje. Pozdrawiam.
