Кракая инструкция по добавлению в шаблон «Индикатора загрузки» - т.е. маленького окошечка, демонстрируемого пользователю, пока грузится сайт.
1. Открываем файл шаблона
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»>
//<![CDATA[
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. Закидываем прилагаемую картинку в сервис загрузки картинок.
Разумеется, вы можете использовать любую другую картинку - пропишите ее имя в коде и бросьте ее на сайт в указанное место.
Источник: Форум русской поддержки Joomla! CMS
2
0