Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Полоса загрузки

Автор: Rivelt_Silverbeast 4.2.2007, 18:39

Не знаю, нужно ли это, поскольку во многих браузерах полоса состояния загрузки и так присутствует... Допустим,то может оказаться полезным на страничках с обилием графики, не отрисовываемой броузером явно сразу же после загрузки, а показываемой лишь после определённого действия пользователя. Тогда можно отследить скорость загрузки графики на странице.

Реализация этой идеи (по сути дела, заимствованной из программирования на ActionScript... а оттуда ещё откуда-то :D ):

В текст страницы вставляем HTML-код блока полосы загрузчика:

Код


<div id='loader' style="position:absolute;left:224px;top:320px;color:silver;">
<span style='border:1px silver solid;height:10px;width:100px;padding:0px;'><img id='loaderbar' src='pic/point.gif' style='width:0px;height:10px;'></span>
<br>
<div id='loaderstring'></div>

Позиционирование тега loader - в зависимости от конкретной страницы, можно и его и вовсе не задавать явно.
Картинка point.gif - это белая точка 1x1, растянутая до подходящих размеров. Её можно заменить на тег div, сo свойствами style="height:8px;width:0px;bachground-color:white;", но я решил всё же использовать первый вариант.

Затем, перед телом страницы (чтобы функция загрузилась до того, как начнёт загружаться тело страницы и объекты, её использующие - об этом позже) определяем такую функцию:

Код


ldpc=0;   // объём загруженной графики (в процентах)

function Load(pc)    //сама функция
{
ldpc+=pc;
loaderbar.style.width=ldpc;                            //удлиняем полосу...
loaderstring.innerHTML='Loading: '+ldpc+'%';    
}

После этого к наиболее весомым картинкам нужно пришить обработчик события onLoad, например, так:

Код


<img class='pict_rc' src='../pic/Tree2.gif' onload='Load(8)'>

При этом аргументом Load должно служить число - процент объёма картинки от общего объёма всей графики на странице.
Тут, наиболее вероятно, может возникнуть несовместимость. Я новичок в javascript и не знаю, поддерживает ли тег <img> в FF и Opera событие onLoad. Кроме того, неудобно для каждой страницы обсчитывать "процентный вес" каждого изображения. Возможно, эту проблему можно решить, используя PHP.

Имхо, этот скрипт не имеет большого значения, и более того, всего лишь увеличивает общий объём кода страницы. Я написал его лишь для отработки навыка. Может быть, кто-нибудь потестит и обнаружит ошибки. Может, кому-нибудь пригодится при оформлении страници.

Автор: Sardar 5.2.2007, 03:30

Можно перед закрывающим </body> пробежаться по всем document.images и повесить проценты автоматом (исключая баннеры). Тогда страницы можно генерить скриптами не задумываясь сколько и какие там картинки.

А вообще рюшечки всё это, даже раздражать могут больше чем нести пользы smile

Особенно если на время загрузку страницу скрывать, то вообще труба smile