![]()
Сборник индикаторов загрузки страниц для сайта
Краткая инструкция по добавлению в шаблон "Индикатора загрузки" - т.е. маленького окошечка, которое будет демонстрироваться пользователю, пока грузится ваш сайт, чтобы посетителям не было скучно...
Приступим.
1. Открываем файл index.php шаблона.
2. В любом месте между тегами <head> и </head> добавляем код:
Code <script type="text/javascript"><BR> function hideLoading()<BR> <BR> {document.getElementById('pageIsLoading').style.display = 'none';}<BR> </script>
3. Сразу после тега <body> добавляем код:
Code <div id="pageIsLoading" style="position:absolute; <BR> display:block; <BR> padding-left:44px; <BR> padding-right:12px; <BR> width:auto; <BR> height:46px; <BR> line-height:46px; <BR> border:1px solid #890000; <BR> color:#000000; <BR> font-weight:bold; <BR> background-color:#e5e5e5; <BR> background-image: url(http://www.путь_к_папке_images/имя_картинки.gif); <BR> background-position: 6px center; <BR> background-repeat: no-repeat;"><BR><script type="text/javascript"> <BR>if (typeof window_width == 'undefined' || typeof window_height == 'undefined') <BR> { <BR>var window_width; var window_height; <BR>if( typeof( window.innerWidth ) == 'number' ) <BR> { <BR>window_width = window.innerWidth; window_height = window.innerHeight; <BR>} <BR> else <BR>if(document.documentElement && ( document.documentElement.clientWidth ||<BR>document.documentElement.clientHeight ) ) <BR> { <BR>window_width = document.documentElement.clientWidth; <BR>window_height = document.documentElement.clientHeight; <BR>} <BR> else <BR> if(document.body && ( document.body.clientWidth ||<BR>document.body.clientHeight ) ) <BR> { <BR>window_width = document.body.clientWidth; <BR>window_height = document.body.clientHeight; <BR>} <BR>} <BR>var left = Math.round((window_width - 200) / 2); <BR>var top = Math.round(((window_height - 46) / 3) + 46); <BR>document.getElementById('pageIsLoading').style.left = left+'px'; <BR>document.getElementById('pageIsLoading').style.top = top+'px'; <BR></script>Загружается... Ждите...
</div>
Разумеется, настройки стиля отображения и текста можно изменить на ваш вкус. Вместо "имя_картинки" введите название файла изображения, которое вы желаете показать на индикаторе. Лучше всего сюда подойдет анимированный GIF с изображением, например, песочных часов. Размер картинки при указанных в примере установках - примерно 32х32 пикселя.
4. Непосредственно перед тегом </body> в самом конце файла index.php добавляем код:
Code <script type="text/javascript"> <BR>if (window.addEventListener) {<BR> window.addEventListener('load', hideLoading, false); <BR>}<BR> else if (window.attachEvent) {<BR> var r = window.attachEvent("onload", hideLoading); <BR>} <BR> else {<BR>hideLoading(); <BR>} <BR></script>
5. Закидываем нужную картинку в папку images вашего сайта, или в любую другую, путь к которой будет указан в вашем коде.
| 
Главная 
