Вот многие хотят себе на сайт некий "скрипт", который показывает загрузку страницы.
Да, его можно сделать на jQuery + CSS. Кода не много и не грузит сайт. Главное: надо что бы на сайте было подключено jQuery (можно через гугл, офф. сайт jQuery или подгружать библиотеку с вашего сайта). Вариантов подключения много.
После тега <body> вставляем код:
А это перед тегом </body> (конечный тег)
в CSS:
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) будет написано Загружаем страницу....
Это будет полезно тем, у кого на сайте много рекламы. Что бы узнать все ли загрузилось и долго ли грузиться полностью страница.
Удачи! :)
Да, его можно сделать на 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) будет написано Загружаем страницу....
Это будет полезно тем, у кого на сайте много рекламы. Что бы узнать все ли загрузилось и долго ли грузиться полностью страница.
Пример
Удачи! :)
- Владислав
- 25-09-2011, 16:26
- 16 633