X

Aleproste na FaceBook'u

Reklama.

[jQuery]Prosty preloader na stronę www

Preloader - czyli grafika, która informuje, że na kolejna stronę naszego serwisu trzeba niestety trochę poczekać.

Preloader można zobaczyć w akcji podczas przechodzenia do kolejnych stron w niniejszym serwisie.

Idea wykonania takiego mechanizmu jest prosta, po kliknięciu na dowolny lub wybrany odnośnik na stronie powinna się wyświetlić odpowiednia grafika, najlepiej gif, który umożliwi wprowadzenie na stronie trochę mniej lub bardziej efektownej animacji.

Zastosowanie jQuery pozwoli na odseparowanie kodu javascript od generowanego kodu HTML i jednocześnie łatwe i czytelne dołączenie preloadera do dowolnej strony www.

Mój skrypt składała się z trzech elementów:

  • Możliwie najnowszej biblioteki jQuery
  • Pliku CSS odpowiadającego za wygląd preloadera
  • Javacript'u wykorzystującego jQuery

Skrypt jQuery został napisany w formie rozszerzenia standardowej biblioteki aby wszystko działało maksymalnie sprawnie i elastycznie. Takie podejście do skryptów pisanych w jQuery, (dla przypomnienia) pozwala:

  • odseparować przestrzeń wykorzystywanych zmiennych od reszty kodu i innych skryptów wykorzystywanych w serwisie
  • na wygodną modyfikację kodu
  • na wywoływanie skryptu za pomocą typowej składni jQuery

Zdradzając zakończenie tego tekstu wywołanie preloadera będzie następujące:

$('a.preload').preLoader();

Ze swej strony, na etapie testów radzę wywoływać rozszerzenia w lekko zmodyfikowany sposób:

$('a.preload').preLoader().css({'color'; 'red'});
 // albo z parametrami
 $('a.preload').preLoader({'idCss':'czekaj', ' Img':'katalog/grafika.gif', 'Text':'cierpliwości!'});

Takie wywołanie zasygnalizuje nam które odnośniki wywołają nasz skrypt i w pewnym zakresie poinformują czy skrypt działa prawidłowo. Oczywiście docelowo, należy stosować pierwszą wersję wywołania.

Przechodząc do sedna, oto kod rozszerzenia jQuery:

opublikowane 18-03-201150 powrót

Tylko dla zalogowanych użytkowników.

Dalsza część publikacji tylko dla zalogowanych użytkowników.

© aleproste.pl v.10 Projekt i realizacja projekt.etvn.pl & aleproste.pl