Создаем индикатор загрузки сайта

Adeptus

Завсегдатай
1861
219 / 15

Создаем индикатор загрузки сайта

« : 02.04.2006, 02:18:54 »

Кракая инструкция по добавлению в шаблон "Индикатора загрузки" - т.е. маленького окошечка, демонстрируемого пользователю, пока грузится сайт (использованы исходники от 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, 13:09:35 от Adeptus »

Записан

userxp

Живу я здесь
2019
403 / 6
Злой и ужасный бармалей

Частично слетел шаблон сайта Автор artist	Ответов: 15 Просмотров: 10298	18.09.2020, 17:02:14 от Kir
Значок (иконка, favicon) в названии сайта Автор FxPunter	Ответов: 33 Просмотров: 168617	04.04.2019, 22:04:51 от 4albon
Как реализована подобная шапка сайта? Автор NAaTa	Ответов: 8 Просмотров: 11710	02.08.2018, 12:29:03 от lexxbry
Отображение Вашего сайта в 19+ браузерах Автор poizon	Ответов: 24 Просмотров: 31239	18.02.2013, 18:55:24 от poizon
Дивы или таблицы с позиции SEO и скорости загрузки сайта ? Автор Арчик	Ответов: 7 Просмотров: 6964	14.08.2008, 20:58:38 от Арчик

👩‍💻 Компонент "CS Афиши" для Joomla.

Яндекс выпустил инструмент Видимость сайта в Алисе AI.

👩‍💻 ИИ-админ для Joomla ближе, чем вы думаете: Joomla MCP.

Похожие темы