Перейти к содержанию

Рекомендуемые сообщения

Добрый день. Использую данный код для показа анимации во время полной загрузки сайта caseroom.in.ua:

<style>
#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 100500;
}

#page-preloader .spinner {
    width: 300px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('/image/catalog/preloader.gif') no-repeat 50% 50%;
    margin: -200px 0 0 -150px;
    
}
</style> 
<script>
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
setTimeout(function(){$('#page-preloader').fadeOut('slow')},2900); 
});
</script>

Проблема заключается в том, что если скорость инета по какой-либо причине страдает, анимашка играет до тех пор, пока не подгрузиться весь контент сайта. Помогите подправит скрипт, что бы он делал fadeOut('slow') если window.onload не происходит в течении четырёх секунд. 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Всё ещё актуально...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо, тема закрыта!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 07.05.2017 в 14:15, mario512 сказал:

Спасибо, тема закрыта!

Можно поинтересоваться кодом такого красивого прелоадера который у вас сейчас стоит?
Буду безмерно благодарен =)
p.s. Классный у Вас сайт ! )

Изменено пользователем vladrein

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

vladrein, Спасибо.

В файле header.tpl по пути /template/common/ сразу после тега <head> вставляем:

<style>
.load-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff; /* цвет фона */
  z-index: 99999;
}

.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #fff;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}

.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}

.load8 .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.3em;
  margin-top: -4.3em;
  font-size: 8px;
  text-indent: -9999em;
  border-top: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-right: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-bottom: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-left: 0.3em solid #fff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;

  }
.spinner {
    width: 150px; /*положение графики*/
    height: 250px;
    position: absolute;
    left: 50%;
    top: 52%;
    background: url('/image/catalog/preloader.svg') no-repeat 50% 50%; /*ваш текст или гифка (желательно использовать svg)*/
    margin: -125px 0 0 -75px;
     
}

.load8 .loader, .load8 .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

После строки <body class="<?php echo $class; ?>">

вставляем:

<div class="load-container load8">
  <div class="loader">Loading...</div>
  <div class="spinner"></div>
</div>

Затем перед закрывающим тегом  </header>

вставляем скрипт:

<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(400);
  });
</script>

Все. Но данный прелоадер не работает без jquery. Убедитесь в том что у вас есть данная строка:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

З.Ы. Решение нашел на просторах инета, запилил под себя.

  • +1 3

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 17.05.2017 в 11:58, mario512 сказал:
Скрытый текст

 

vladrein, Спасибо.

В файле header.tpl по пути /template/common/ сразу после тега <head> вставляем:



<style>
.load-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff; /* цвет фона */
  z-index: 99999;
}

.no-cssanimations .load-container .loader {
  text-indent: 0;
  text-align: center;
  color: #fff;
  font-size: 17px;
  background: none;
  border: 0 none;
  width: auto;
  height: auto;
  margin: 1em auto;
  overflow: visible;
  box-shadow: none;
  -webkit-animation: none;
  animation: none;
}

.no-cssanimations .load-container .loader:before,
.no-cssanimations .load-container .loader:after {
  display: none;
}

.load8 .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.3em;
  margin-top: -4.3em;
  font-size: 8px;
  text-indent: -9999em;
  border-top: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-right: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-bottom: 0.3em solid rgba(244, 128, 0, 0.96); /*цвет крутяшки*/
  border-left: 0.3em solid #fff;
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;

  }
.spinner {
    width: 150px; /*положение графики*/
    height: 250px;
    position: absolute;
    left: 50%;
    top: 52%;
    background: url('/image/catalog/preloader.svg') no-repeat 50% 50%; /*ваш текст или гифка (желательно использовать svg)*/
    margin: -125px 0 0 -75px;
     
}

.load8 .loader, .load8 .loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

После строки <body class="<?php echo $class; ?>">

вставляем:



<div class="load-container load8">
  <div class="loader">Loading...</div>
  <div class="spinner"></div>
</div>

Затем перед закрывающим тегом  </header>

вставляем скрипт:



<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(400);
  });
</script>

Все. Но данный прелоадер не работает без jquery. Убедитесь в том что у вас есть данная строка:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

З.Ы. Решение нашел на просторах инета, запилил под себя.

 

 


Спасибо, очень выручили.

 

Изменено пользователем vladrein

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 17.05.2017 в 11:58, mario512 сказал:

Затем перед закрывающим тегом  </header>

вставляем скрипт:


<script>
  $(window).load(function () {
      $(".load-container").delay(100).fadeOut(400);
  });
</script>

Все. Но данный прелоадер не работает без jquery. Убедитесь в том что у вас есть данная строка:

<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>

З.Ы. Решение нашел на просторах инета, запилил под себя.

Подправил скрипт для более быстрой загрузки через мобильный интернет:

<script>
  $(window).ready(function () {
      $(".load-container").delay(50).fadeOut(250);
  });
</script>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.