Пятница, 17.05.2024, 11:59
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Январь » 31 » Индикаторы загрузки сайта
    22:29
    Индикаторы загрузки сайта
    Описание:
    При загрузке страници появляется окно с надписью и анимацией которая информирует что страница грузится и предлогает подождать.

    Установка:
    Перед </head> добавляем код:

    Quote
    <script type="text/javascript">
    function hideLoading()
    {
    document.getElementById('pageIsLoading').style.display = 'none';
    }
    </script>

    Сразу после тега <body> добавляем код:

    Quote
    <div id="pageIsLoading" style="position:absolute;
    display:block;
    padding-left:44px;
    padding-right:12px;
    width:auto;
    height:46px;
    line-height:46px;
    border:1px solid #890000;
    color:#000000;
    font-weight:bold;
    background-color:#e5e5e5;
    background-image: url(http://www.путь_к_папке_images/имя_картинки.gif);
    background-position: 6px center;
    background-repeat: no-repeat;">
    <script type="text/javascript">
    if (typeof window_width == 'undefined' || typeof window_height == 'undefined')
    {
    var window_width; var window_height;
    if( typeof( window.innerWidth ) == 'number' )
    {
    window_width = window.innerWidth; window_height = window.innerHeight;
    }
    else
    if(document.documentElement && ( document.documentElement.clientWidth ||
    document.documentElement.clientHeight ) )
    {
    window_width = document.documentElement.clientWidth;
    window_height = document.documentElement.clientHeight;
    }
    else
    if(document.body && ( document.body.clientWidth ||
    document.body.clientHeight ) )
    {
    window_width = document.body.clientWidth;
    window_height = document.body.clientHeight;
    }
    }
    var left = Math.round((window_width - 200) / 2);
    var top = Math.round(((window_height - 46) / 3) + 46);
    document.getElementById('pageIsLoading').style.left = left+'px';
    document.getElementById('pageIsLoading').style.top = top+'px';
    </script>
    Загружается... Ждите...
    </div>

    Разумеется, настройки стиля отображения и текста можно изменить на ваш вкус. Вместо "имя_картинки" введите название файла изображения, которое вы желаете показать на индикаторе. Лучше всего сюда подойдет анимированный GIF с изображением, например, песочных часов. Размер картинки при указанных в примере установках - примерно 32х32 пикселя. (Пак картинок можно скачать ниже)

    Непосредственно перед тегом </body> в самом конце файла добавляем код:

    Quote
    <script type="text/javascript">
    if (window.addEventListener) {
    window.addEventListener('load', hideLoading, false);
    }
    else if (window.attachEvent) {
    var r = window.attachEvent("onload", hideLoading);
    }
    else {
    hideLoading();
    }
    </script>

    скачать пак- http://all4ucoz.org.ru/_fr/3/loading_img.rar
    Категория: скрипты для ucoz сайта | Просмотров: 1280 | Добавил: aksel | Рейтинг: 0.0/0
    Всего комментариев: 2
    2 zagor  
    0
    Блин выложи скрин!!! Че так трудно!!! angry angry angry

    1 AmatoryFaN  
    0
    А пак качать обязательно?

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]