Прелоадер картинок

Прелоадер картинок позволяет визуально показать пользователю, что картинка еще не загрузилась и либо показать шкалу загрузки, что может быть сильно избыточно особенно для маленьких картинок, либо показать небольшой значок свидетельствующий о том, что картинка загружает - именно такой вариант использован в этом прелоадере

Прелоадер картинок

Смотрим демо. У тех у кого канал интернета достаточно большой могут не успеть увидеть действо - жмем обновить.

Структура html кода проста как железный чайник

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.preloader.js"></script>
<script type="text/javascript">
$(function(){
$("#gallery").preloader();
});
</script>
<link rel="stylesheet" href="css/preloader.css" type="text/css" />
<div id="container">  
    <ul id="gallery" class="clearfix">
        <li><p><a href="#"><img src="images/1.jpg" /></a></p></li>
        <li><p><a href="#"><img src="images/2.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/3.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/4.jpg" /></a></p></li>
        <li><p><a href="#"><img src="images/5.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/6.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/7.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/8.jpg" /></a></p> </li>
        <li><p><a href="#"><img src="images/9.jpg" /></a></p> </li>
    </ul>
</div>

Как видимо из кода реализован прелоадер на jQuery