Robimy preloader

Index » Kategoria: CSS » Tagi: , , .

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"]ladowany_obrazek[/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 zamiast

    src=“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.

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

Ostatnie komentarze

admin
TOP