1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Установка и настройка

Как поставить троббер загрузки?

Главные вкладки

Аватар пользователя VasyOK VasyOK 22 мая 2018 в 16:08

Часто вижу на разных сайтах, что пока страничка загружается - крутиться некий троббер.
В Drupal что-то подобное есть? И есть ли смысл это использовать?
Единственное, что нашел - https://www.drupal.org/project/page_throbber . Не скажу что впечатлен модулем. Ил это не модулем делается?

Комментарии

Аватар пользователя gun_dose gun_dose 22 мая 2018 в 20:36

Гуглим pure css throbber. Находим среди понравившихся тот, у которого в разметке нужен только олин элемент и вешаем его стили на класс .throbber

Аватар пользователя VasyOK VasyOK 24 мая 2018 в 3:15

Спасибо DD 85! Этот прелоадер действительно помог.
Зачем я все это затеял. Сео-ориентированные люди требуют повышать показатели производительности в синтетических тестах.
Если

<?php print $scripts; ?>  
 <?php print $styles; ?>

поместить вниз страницы, эти показатели, но не всем нравится наблюдать "постепенную" подгрузку элементов сайта. Нашел выход в данном "троббере".

На сайте прелоадера пишут, что его код надо поместить перед закрывающим тегом body. Но в этом случае сначала "постепенно" грузится страничка, потом показывается прелоадер, а потом уже страничку видно. Я сделал так (выдержка из html.tpl.php):

</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<style type="text/css">    
    #hellopreloader_preload {
    display: block;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
    background: #282828 url(/sites/all/themes/mytheme/images/oval.svg) center center no-repeat;
    background-size:86px;
  }
</style>
<div id="hellopreloader">
  <div id="hellopreloader_preload"></div>  
</div>
<script type="text/javascript">
    var hellopreloader = document.getElementById("hellopreloader_preload");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},0);};
</script>  
<?php print $page_top; ?>

Код чучуть подправил. Задержку в милисикундах убрал. min-width: 1000px - нафиг. Ну еще мелочи.

Результаты.
Аудит Хрома +20 баллов производительности.
Google Pagespeed +1 балл оптимизации

pure css throbber пока в процессе изучения