Полоса загрузки

Rio-Shaman

25 Сентября 2011 г. 16:08

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

Что же делать? Как реализовать предварительную загрузку сразу всех изображений, и не дать пользователю попытаться открыть еще не загруженные картинки? Есть один очень простой способ загрузить сразу все изображения...

Создать цикл в php который просто показал бы все изображения на странице и спрятать их в div с стилем display:none; Покажу пример:

<div style="display:none;">//Див с стилем display:none; т.е. пользователь не увидит 
эти изображения
<?
    $result_gal = mysql_query("SELECT * FROM название таблице в БД");//Вытаскиваем 
        //ссылки изображений из БД
    $myrow_gal = mysql_fetch_array($result_gal);
        do echo "<img src=\"img/".$myrow_gal[href].".jpg\">";//Собственно ссылка 
                //на наше изображение
        while($myrow_gal = mysql_fetch_array($result_gal));
?>
</div>

С загрузкой всех изображений мы разобрались, теперь встает следующий вопрос, как же не дать пользователю работать с изображениями, пока они все не прогрузятся? Для того чтобы прятать всю страницу от пользователя, до того момента как сформируется вся страница можно использовать window.onload. То есть по сути нам нужно отследить когда же сформируется вся страница. После того как страница сформирована, показать нашу галерею. Реализуется это следующим образом:

Первое что нужно сделать, это создать 2 дива.. В первом будет отображаться надпись "загрузка" с анимированным изображением, а во втором страницу с галереей... Для того что бы пользователь не видел сразу два этих дива, будем один из них прятать с помощью display:none; Стартовая страница будет выглядеть вот так:

<script>
window.onload = function() 
{
    $("#load_gal").fadeOut(600,function ()
        {
            $("#load_gal_no").fadeIn(600);	
        });
};
</script>
<div id="load_gal" style="display:block;position:absolute;width:100px;
height:12px;left:50%;top:40%;margin-left:-50px;text-align:center;">
<p style="color:#fff;">Загрузка</p>
<img src="img/load.gif" border="0">
</div>
<div id="load_gal_no" style="display:none;">
...
</div>