Индикатор загрузки страницы

  • Не нравится
  • +1
  • Нравится
Индикатор загрузки страницы Вот многие хотят себе на сайт некий "скрипт", который показывает загрузку страницы.
Да, его можно сделать на jQuery + CSS. Кода не много и не грузит сайт. Главное: надо что бы на сайте было подключено jQuery (можно через гугл, офф. сайт jQuery или подгружать библиотеку с вашего сайта). Вариантов подключения много.

Установка


После тега <body> вставляем код:

<div style="position:relative" id="zv-load">
<div class="zv-load-css">
<img src="{THEME}/images/zvlad-loading.gif" alt="Загружаем страницу..." style="vertical-align: middle;" > Загружаем страницу...</div>
</div>


А это перед тегом </body> (конечный тег)


<script language="javascript" type="text/javascript">
$(window).load(function () {
$("#zv-load").fadeOut("slow");
});
</script>



в CSS:


.zv-load-css {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
position:fixed;
top:5px;
left:5px;
background:rgba(0,0,0,0.7);
color:#fff;
padding:6px 10px;
z-index:999;
font-size:11px;
font-family:Tahoma;
}



Индикатор загрузки страницы Cохраняем вот эту картинку.

Пояснения


src="{THEME}/images/zvlad-loading.gif" - путь к картинке.

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px; - это закругленность индикатора. По желанию можно вообще убрать. Но тогда будет информация о загрузке выводиться в квадратном поле.

background:rgba(0,0,0,0.7); - первые три ноля это цвет по rgba. 0,7 - прозрачность.

Полезности


Код работает так: пока не загрузиться станица полностью (css, java, iframe) будет написано Загружаем страницу....
Это будет полезно тем, у кого на сайте много рекламы. Что бы узнать все ли загрузилось и долго ли грузиться полностью страница.

Пример



Удачи! :)
Вернуться назад

Коментарии

Аватар
WeezyF, Не работает что то твой сайт :)
  
Аватар
  • WeezyF
  • Группа: Гости
Ещё несколько интересных индикаторов - lecaw.ru/index.php/categories/css/item/288-indikator-zagruzki
  
Аватар
barkanum, ну я не знаю что там у тебя за cms стоит)) Проще будет просто поставить в файл шаблона мой вариант и все)
Я так делаю.
  
Аватар
если ты имеешь в виду в файле index.php то вот его содержимое ))

// no direct access
defined('_JEXEC') or die('Restricted access');

// include config    
include_once(dirname(__FILE__).'/config.php');

// get warp
$warp =& Warp::getInstance();

// load main template file, located in /layouts/template.php
echo $warp->template->render('template');


А вообще он и подключен в шаблоне по умолчанию в файле template.config.php
$this->warp->javascripts->add('js:jquery.js');

а твой див и скрипт вставляется в файл template.php ошибиться сложно он единственный из всех написаный на html то есть только в нем есть <head> и <body> остальные все на php я сам в шоке :))
Но шаблон красивый и на него есть много полезных модулей и плагинов от yootheme. и они работают на jQuery :)<br /><br />если ты имеешь в виду в файле index.php то вот его содержимое ))

<?php

// no direct access
defined('_JEXEC') or die('Restricted access');

// include config    
include_once(dirname(__FILE__).'/config.php');

// get warp
$warp =& Warp::getInstance();

// load main template file, located in /layouts/template.php
echo $warp->template->render('template');

А вообще он и подключен в шаблоне по умолчанию в файле template.config.php
$this->warp->javascripts->add('js:jquery.js');

а твой див и скрипт вставляется в файл template.php ошибиться сложно он единственный из всех написаный на html то есть только в нем есть <head> и <body> остальные все на php я сам в шоке :))
Но шаблон красивый и на него есть много полезных модулей и плагинов от yootheme. и они работают на jQuery :)<br /><br />Все я разобрался просто в скрипте


<script language="javascript" type="text/javascript">
(function($){
$(function(){
$(window).load(function () {
$("#zv-load").fadeOut("slow");
});
});
})(jQuery);
</script>

надо было убрать строку jQuery.noConflict(); так как в встроеном jquery в самом конце файла она уже есть. Все заработало со yoothemовским jquer. Я счастлив
  
Аватар
barkanum, как же у тебя все запущенно....

Не легче просто в шаблон подключить кьювери и все, а?..
  
Аватар
а у меня так:)

// jQuery loaded by FLEXIcontent ?
if (isset($head['scripts']['administrator/components/com_flexicontent/assets/js/jquery-1
<br />.4.min.js'])) {
$this->warp->system->application->set('jquery', true);
}

// load jQuery first, if not loaded before
if (!$this->warp->system->application->get('jquery')) {
$this->warp->system->application->set('jquery', true);
$head['scripts'] = array_merge(array($this->warp->path->url('lib:jquery/jquery.js') => 'text/javascript'), $head['scripts']);
$this->warp->system->document->setHeadData($head);
}

у меня шаблон от yootheme там jquery уже есть, но в режиме noConflict. и если в скрипте не указать чтоб он не учитывал алиас & (noConflict) то он не работает как я и писал, не выключается. Но если привести скрипт в выше приведенную форму то он работает , но не работают некоторые компоненты сайта работающие на jquery. А если подключить тотже jquery который идет в комплекте вручную (выглядит это так: $this->warp->javascripts->addDeclaration($script);
$this->warp->javascripts->add('js:jquery.js'); ) То вроде бы все работает, но как то подтупливает чтоли, точно не могу сказать но определенно чтото не так. Вот такая вот фигня. Я сам то не Про в этом деле уже неделю пытаюсь чтото придумать. Но все равно спасибо, если б не гребаный yootheme былоб все нештяк. :)
  
Аватар
barkanum, вот так у меня подключено:
<script type="text/javascript" src="http://zvlad.com/engine/classes/js/jquery.js"></script>
<script type="text/javascript" src="http://zvlad.com/engine/classes/js/jqueryui.js"></script>
Кьювери и Ю`кьювери. Все! И работает мой вариант без всяких noConflict
  
Аватар
) да это та все понятно ))
у меня jquery в режиме noConflict crhbgn должен выхлядеть так:

<script language="javascript" type="text/javascript">
jQuery.noConflict();
(function($){
$(function(){
$(window).load(function () {
$("#zv-load").fadeOut("slow");
});
});
})(jQuery);
</script>

Спасибо большое за индикатр ето единственный который мне подошел. Хотелось бы на jquery.blockU но у меня jquery 1.4.4 и он уходит в вечный Loading. А этот работает.
  
Аватар
Цитата: barkanum
Аналогично - не исчезает. ТОЛЬКО jquery подключено. А скриптик то был бы пля меня крайне полезен :(

Что бы исчезал, надо поставить вот этот код

<script language="javascript" type="text/javascript">
$(window).load(function () {
$("#zv-load").fadeOut("slow");
});
</script>


перед </body> (в конце страницы.)
  
Аватар
Аналогично - не исчезает. ТОЛЬКО jquery подключено. А скриптик то был бы пля меня крайне полезен :(
  
Аватар
bergamot, чуть исправил.
Теперь все работает.
Так же, надо что бы было подключено jQuery
  
Аватар
что не работает :( вернее работает, но не так как описано. Появляется слева в вверху кружок с загрузкой, но он не исчезает а продолжает крутиться всё время.