Webmark

Robimy preloader

Index » Kategoria: CSS » Tagi: centrowanie , css , tutorial.

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.

* * *

• Komentarze
• Archiwum