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:
[code lang="css"].preloader {
background: url(obrazki/loading.gif) no-repeat 50% 50%;
}[/code]
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:
[code lang="html"][/code]
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Ä:
[code lang="css"]img {
background: url(obrazki/loading.gif) no-repeat 50% 50%;
}[/code]
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 http://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Ä Ä 8)
-
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.