Основной курс по Joomla
0 Пользователей и 1 Гость просматривают эту тему.
  • 36 Ответов
  • 40718 Просмотров
*

Adeptus

  • Разработчик расширений для Joomla 1.0
  • *
  • 1869
  • 204
Кракая инструкция по добавлению в шаблон "Индикатора загрузки" - т.е. маленького окошечка, демонстрируемого пользователю, пока грузится сайт (использованы исходники от d4).

1. Открываем файл index.php шаблона
2. В любом месте между тегами <head> и </head> добавляем код:
Код
<script type="text/javascript">
function hideLoading() {
document.getElementById('pageIsLoading').style.display = 'none';
}
</script>
3. Сразу после тега <body> добавляем код:
Код
<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/loadingcircle.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>
Разумеется, настройки стиля отображения и текста можно изменить на ваш вкус.
4. Непосредственно перед тегом </body> в самом конце файла добавляем код:
Код
<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>
5. Закидываем прилагаемую картинку в папку images вашего сайта.
6. Тащимся от собственной крутизны... :)

Разумеется, вы можете использовать любую другую картинку - пропишите ее имя в коде и бросьте ее на сайт в указанное место.

[вложение удалено Администратором]
« Последнее редактирование: 02.04.2006, 15:09:35 от Adeptus »
*

userxp

  • Практически профи
  • *******
  • 2054
  • 397
  • Злой и ужасный бармалей
Re: Создаем индикатор загрузки сайта
« Ответ #1 : 02.04.2006, 04:21:30 »
ну вот, теперь у себя придётся переделывать.... ;D
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

Adeptus

  • Разработчик расширений для Joomla 1.0
  • *
  • 1869
  • 204
Re: Создаем индикатор загрузки сайта
« Ответ #2 : 02.04.2006, 04:32:01 »
ну вот, теперь у себя придётся переделывать...
Дык у тебя практически все так и есть. Только надпись не по-русски... :)
*

inORANGEstylee

  • Осваиваюсь на форуме
  • ***
  • 55
  • 22
  • Joomla Fan
Re: Создаем индикатор загрузки сайта
« Ответ #3 : 02.04.2006, 05:32:18 »
2 Adeptus, прикольненько. спасиб ну и +1 держи :)
Re: Создаем индикатор загрузки сайта
« Ответ #4 : 02.04.2006, 11:52:30 »
Извините что влезаю, а зачем это нужно?
*

Adeptus

  • Разработчик расширений для Joomla 1.0
  • *
  • 1869
  • 204
Re: Создаем индикатор загрузки сайта
« Ответ #6 : 02.04.2006, 14:13:08 »
2 Adeptus, прикольненько. спасиб ну и +1 держи :)
Не за что! Ну и тебе спасибо за оценку... :)
*

Adeptus

  • Разработчик расширений для Joomla 1.0
  • *
  • 1869
  • 204
Re: Создаем индикатор загрузки сайта
« Ответ #7 : 02.04.2006, 14:16:40 »
Извините что влезаю, а зачем это нужно?
Ну... Дык... Эта... Елы-палы... Того...
А зачем вообще нужны всякого рода красивости/технологические продвинутости?
Когда вы, коллега, XP стартуете - зачем по бутскрину индикатор бежит?
А Виста вообще будет при загрузке Авророй переливаться...

РЕЗЮМЕ: шоб было! :)
*

userxp

  • Практически профи
  • *******
  • 2054
  • 397
  • Злой и ужасный бармалей
Re: Создаем индикатор загрузки сайта
« Ответ #8 : 02.04.2006, 14:30:23 »
Извините что влезаю, а зачем это нужно?
а это некая такая попытка хоть как-то (частично) решить вопрос об ожидании загрузки сайта

2 Adeptus
было бы корректным всё же написать, что данное решение было ...ээээ... "подсмотрено" у d4.
и что loadingcircle.gif - это тоже их.
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

Adeptus

  • Разработчик расширений для Joomla 1.0
  • *
  • 1869
  • 204
Re: Создаем индикатор загрузки сайта
« Ответ #9 : 02.04.2006, 15:08:28 »
было бы корректным всё же написать, что данное решение было ...ээээ... "подсмотрено" у d4.
и что loadingcircle.gif - это тоже их.
Да я и не претендовал на авторство, вроде бы...
Только про д4 я не знал - скрипты выдрал по просьбе одного из пользователей из какого-то шаблона, предоставленного им же (указания на авторство не было), для того, чтобы можно было использовать в любом шаблоне... :)

ЗЫ: тем не менее, первый пост поправил на предмет первоисточника...
« Последнее редактирование: 02.04.2006, 15:10:12 от Adeptus »
*

userxp

  • Практически профи
  • *******
  • 2054
  • 397
  • Злой и ужасный бармалей
Re: Создаем индикатор загрузки сайта
« Ответ #10 : 02.04.2006, 15:12:07 »
ок
Как правильно задавать вопрос службе технической поддержки  yes!
SGA CM 7.2.0 RC0 KANG Build GWK74 + s95allinonescript + CWM 5.0.2.6 + Modem XWKT3
*

Bogus

  • Осваиваюсь на форуме
  • ***
  • 94
  • 3
  • В глазах обида, в руках утюг!
Re: Создаем индикатор загрузки сайта
« Ответ #11 : 11.04.2006, 12:45:08 »
по прочтению плакал :)    +1 Адептусу
Re: Создаем индикатор загрузки сайта
« Ответ #12 : 09.06.2006, 19:18:31 »
у меня может что-то не получилось..но ..в общем смотрите: http://trinke.net
он всё время крутится..=(..
Re: Создаем индикатор загрузки сайта
« Ответ #13 : 09.06.2006, 22:43:20 »
у меня может что-то не получилось...

Естессно, "Script Error".

Строка:2145
Символ:9
Ошибка:"hideLoading" - определение отсутствует
Re: Создаем индикатор загрузки сайта
« Ответ #14 : 10.06.2006, 23:05:37 »
Прикольно...FireFox 2 альфа2 при загрузке заявляет о зависшем скрипте и выгружает его напроч...
*

annik

  • Осваиваюсь на форуме
  • ***
  • 37
  • 1
Re: Создаем индикатор загрузки сайта
« Ответ #15 : 17.06.2006, 01:50:21 »
у меня может что-то не получилось..но ..в общем смотрите: http://trinke.net
он всё время крутится..=(..
хи-хи .
У меня 2 недели работал нормально, а теперь постоянно крутится, хотя я к коду даже не притрагивался.. Что такое?
http://www.*******.ru/
« Последнее редактирование: 25.05.2007, 02:22:29 от annik »
*

Александр Фёдоров

  • Осваиваюсь на форуме
  • ***
  • 151
  • 22
  • Жизнь - удивительная штука
Re: Создаем индикатор загрузки сайта
« Ответ #16 : 17.06.2006, 02:14:56 »
Уважаемые!

Совершенно жутко смотрится этот индикатор загрузки на сайтах!!
Посмотрел несколько сайтов по ссылкам с форума - бесит надпись "Загрузка... Ждите..." и т.п.

Подобная штука хороша только при выполнении какой-либо долгой операции на сервере (например, проверка whois или т.п.), т.е. когда пользователь знает, что ему надо подождать... А когда эта картинка вылетает на полсекунды, а затем гаснет... да еще на каждой странице... Больше трех страниц смотреть не хочется.

Чем меньше отвлекающих моментов на сайте, тем лучше (если вы его, конечно, не делаете только для того, чтобы показать какие нужные и ненужные фенечки бывают).
Жизненно важный ингредиент успеха — это не знать, что задуманное вами невозможно выполнить. М.Жванецкий
Re: Создаем индикатор загрузки сайта
« Ответ #17 : 17.06.2006, 02:34:10 »
Совершенно согласен с Александр Фёдоров
*

annik

  • Осваиваюсь на форуме
  • ***
  • 37
  • 1
Re: Создаем индикатор загрузки сайта
« Ответ #18 : 17.06.2006, 12:50:54 »
Совершенно согласен с Александр Фёдоров
ну раз гуру сказали, значит удалим..
*

Dutch

  • Support Team
  • *****
  • 663
  • 86
  • Проф. разработка больших порталов с нуля!
Re: Создаем индикатор загрузки сайта
« Ответ #19 : 11.07.2006, 17:32:28 »
Кстати а это же можно использовать с умом :)
Вот например у нас есть сайт с интро
Заливаем всю графику в цсс для интро и так же всю графику для основного шаблона
Выводим нужные классы для интро а остальные выводим в контейнер за пределы экрана.
Что получаем?
По скольку у нас есть кэш то следующие страницы грузятся намного быстрее, из этого следует, что при первом заходе сайт будет долго грузится (ведь подтягиваемграфику с основного шаблона) и посему индикатор загрузки будет уместен.
Но, только этот индикатор нада вставить в шаблон интро.
Визуально будет выглядить что действительно при первом заходе сайт загружался на компьютер :)

*

Ctrelok

  • Осваиваюсь на форуме
  • ***
  • 26
  • -2
Re: Создаем индикатор загрузки сайта
« Ответ #20 : 10.08.2006, 01:34:20 »
Не подскажите, а как скрпит использовать, чтобы он срабатывал, если страница загружается, скажем, более 3-х секунд. идея - хорошая, но вот действительно некрасиво выглядит, когда на каждой странице подряд выскакивает...
*

Timon_Crazy

  • Давно я тут
  • ****
  • 364
  • 27
  • Лицензнаци
Re: Создаем индикатор загрузки сайта
« Ответ #21 : 09.07.2007, 15:03:44 »
просто ставить таймер шоли.
простов время начала загрузки и текущее
если есть разница - то выводить.

это если на пальцах.
ЧаВо - FAQ - Вопросы
--
Сщастливый безумец
--
не говори спасибо: + поставь
не ставь минус - поругай.
*

chilly_bang

  • Осваиваюсь на форуме
  • ***
  • 113
  • 0
Re: Создаем индикатор загрузки сайта
« Ответ #22 : 09.07.2007, 15:47:26 »
простов время начала загрузки и текущее
если есть разница - то выводить.
полезная вещь очень. особенно когда надо хостера носом ткнуть... чтоб время исполнения скриптов подкрутил.
было бы вообще дико прикольно, если б можно было определять (в лог писать), какой именно скрипт долго исполняется (грузится дольше чем ...секунд). или как?
*

Poster

  • Осваиваюсь на форуме
  • ***
  • 31
  • 7
Re: Создаем индикатор загрузки сайта
« Ответ #23 : 09.07.2007, 17:11:56 »
поддерживаю Dutch идею
заливать все в Интро, и за пределы экрана, чтобы прокешировалось.

Только загвоздочка небольшая. Как сделать, чтобы интро грузилась только Один раз! (чтобы потом не надоедало), не зависимо от того, как человек попал на главную?
Прописывать в Cookies идентификатор пользователя и потом проверять, заполнен ли он?
*

dremora

  • Тестеры
  • *****
  • 466
  • 36
Re: Создаем индикатор загрузки сайта
« Ответ #24 : 09.07.2007, 17:33:07 »
полезная вещь очень. особенно когда надо хостера носом ткнуть... чтоб время исполнения скриптов подкрутил.
было бы вообще дико прикольно, если б можно было определять (в лог писать), какой именно скрипт долго исполняется (грузится дольше чем ...секунд). или как?

Нет для этого есть режим отладки... Покажет за сколько страница сгенерирована и SQL запросы...
Всё что не анархия, то фашизм...
*

baser

  • Осваиваюсь на форуме
  • ***
  • 69
  • 19
Re: Создаем индикатор загрузки сайта
« Ответ #25 : 09.07.2007, 17:34:22 »
А никто незнает как сделать себе такой компонентик или модуль как тут http://ajaxload.info/ а то постоянно залазить на этот сайт, что бы сделать анимированную иконку долго, а локально было бы быстрее, а то задумка у автора очень класная, штук 10 разных анимированных загрузок сделал себе минут за 5
*

archer1981

  • Давно я тут
  • ****
  • 264
  • 13
Re: Создаем индикатор загрузки сайта
« Ответ #26 : 27.12.2007, 14:15:32 »
Вот значит сделал себе прогрессбар, соорудил с ajaxload gif-иконку. Вместе с ней использую надпись "загрузка страницы..." Теперь проблема в следующем - текст сливается со страницей. Как сделать нужный по размеру непрозрачный задник прогрессбара?
http://walkspb.ru - Энциклопедия Санкт-Петербурга
*

mosgaz

  • Осваиваюсь на форуме
  • ***
  • 65
  • 12
Re: Создаем индикатор загрузки сайта
« Ответ #27 : 24.12.2008, 16:31:15 »
Уважаемый, Adeptus, подскажите пожалуйста каким образом этот код применить для отдельного div'a.

<div class="loader">
     <div class="content_container">
     </div>
</div>

... вроде этого
ACER == мусор.
*

noni

  • Новичок
  • *
  • 5
  • 0
Re: Создаем индикатор загрузки сайта
« Ответ #28 : 07.06.2010, 15:45:07 »
Вещь нужная, но не для всего сайта. Подскажите пожалуйста, можно ли использовать этот индикатор для отдельных страниц? Если да то как?
*

Adeptus

  • Разработчик расширений для Joomla 1.0
  • *
  • 1869
  • 204
Re: Создаем индикатор загрузки сайта
« Ответ #29 : 07.06.2010, 17:06:21 »
Вещь нужная, но не для всего сайта. Подскажите пожалуйста, можно ли использовать этот индикатор для отдельных страниц? Если да то как?

Создавайте в шаблоне условие по $option.