JavaScript

Elegancki preloader obrazków

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.

<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.

<div class="image-holder"> 
    <img src="https://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.

<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.

.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.

<link rel="stylesheet" href="preloader.css" type="text/css" />

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

Brak komentarzy

Napisz komentarz jako pierwszy!

Zostaw odpowiedź