Здравствуйте, друзья. Сегодня в видеоуроке я Вам покажу, как добавить эффект прелоадера на сайт, функционирующий на Joomla. Прелоадер (preloader) - предзагрузчик предназначен информировать посетителя о процессе загрузки основного проекта и занимает его внимание на это время. Изучив данный видеоурок, вы легко сможете добавить такой прелоадер на свой сайт. Скоре приступайте к просмотру видеоурока!
Видеоурок. Добавляем прелоадер на сайт Joomla.
Код подключения библиотеки jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Код, который нужно вставить после тега <body> :
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- Preloader end -->
Код, который нужно вставить перед тегом </body> :
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$("#status").fadeOut(); // will first fade out the loading animation
$("#preloader").delay(500).fadeOut("fast"); // will fade out the white DIV that covers the website.
})
//]]>
</script>
<!-- Preloader end -->Код CSS-правил стилей прелоадера:
/* Preloader */
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
opacity: 0.7;
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../images/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}Рисунок прелоадера находится во вложениях к данной статье.
Ссылки на генераторы прелоадеров:
http://preloaders.net/ru/
http://www.ajaxload.info/
http://www.loadinfo.net/
