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.
1 | <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> |
W sekcji <body> natomiast wstawmy <div> o klasie image-holder, a w nim obrazek, który ma być wcześniej buforowany.
1 2 3 | <div class="image-holder"> <img src="http://farm4.static.flickr.com/3563/3381408848_9c746f35f6.jpg?v=0" alt="Image 1"/> </div> |
Kolejnym krokiem będzie uruchomienie skryptu. W części <head> wstawiamy odwołanie do niego, bądź wpisujemy go w ramy dokumentu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> $(function () { $('img').hide(); }); var i = 0; var int=0; $(window).bind("load", function() { var int = setInterval("doThis(i)",500); }); function doThis() { var images = $('img').length; if (i >= images) { clearInterval(int); } $('img:hidden').eq(0).fadeIn(500); i++; } </script> |
Powinniśmy także odpowiednio sformatować elementy na stronie. Do tego tworzymy dokument CSS.
1 2 3 4 5 6 7 8 9 10 | .image-holder{ float:left; width:500px; height:313px; padding:10px; margin:10px; border:1px solid #ddd; background:#eee url(loading.gif) 50% 50% no-repeat; display:inline; } |
Na koniec odwołujemy się do niego w nagłówku naszej witryny.
1 | <link rel="stylesheet" href="preloader.css" type="text/css" /> |
Wyżej opisany efekt możemy zobaczyć na stronie: DEMO.
