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:

  1. .preloader {
  2. background: url(obrazki/loading.gif) no-repeat 50% 50%;
  3. }

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:

  1. <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?:

  1. img {
  2. background: url(obrazki/loading.gif) no-repeat 50% 50%;
  3. }

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?? 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=""> <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

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP