Elegancki preloader obrazków


4 maja 2011 / Michał Kortas


W dzisiejszym poradniku ponownie wejdziemy w świat jQuery. Tym razem przygotujemy prosty ale bardzo funkcjonalny preloader obrazków. Oczywiście nie przyda się ona na każdej stronie. Czasem jednak jest takowy potrzebny, w wypadku, gdzie do wczytania są sporej wielkości zdjęcia, a nie chcemy narażać internautę do oglądanie ich podczas częściowego wyświetlania lub kiedy są zupełnie niewyraźne. Tak więc bez zbędnych wywodów zabierzmy się do pracy.

Pliki źródłowe do pobrania z naszej pobieralni >> Preloader obrazków – jQuery

Na początku powinniśmy stworzyć nowy dokument HTML. W sekcji <head> umieśćmy kod, który zaimportuje nam bibliotekę jQuery.

W sekcji <body> natomiast wstawmy <div> o klasie image-holder, a w nim obrazek, który ma być wcześniej buforowany.

Kolejnym krokiem będzie uruchomienie skryptu. W części <head> wstawiamy odwołanie do niego, bądź wpisujemy go w ramy dokumentu.

Powinniśmy także odpowiednio sformatować elementy na stronie. Do tego tworzymy dokument CSS.

Na koniec odwołujemy się do niego w nagłówku naszej witryny.

Wyżej opisany efekt możemy zobaczyć na stronie: DEMO.



Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *