1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Не удачная реализация preloader на сайте

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

Аватар пользователя alex-litvinov alex-litvinov 27 августа 2019 в 10:53

Добрый день, установил модуль PACE, для осуществления процесса загрузки на сайте preloader, в принципе работает не плохо но один момент, виден задний фон. Может кто то сталкивался с таким.

Лучший ответ

Комментарии

Аватар пользователя alex-litvinov alex-litvinov 27 августа 2019 в 16:40

Белый фон, имеется ввиду что в процессе загрузки видно сайт, т.е. получается просто поверх сайта появляется проценты с загрузкой

Аватар пользователя VasyOK VasyOK 27 августа 2019 в 23:08

html.tpl.php темы
В конце head есть style
В начале body есть
<div id="hellopreloader_preload"></div>
и script

Выглядит примерно так:

<head>
  <!-- В конце head: -->
  <style type="text/css">    
                #hellopreloader_preload {
                        display: block;
                        position: fixed;
                        overflow: hidden;
                        z-index: 99999;
                        top: 0;
                        left: 0;
                        width: 100vw;
                        height: 100vh;          
                        background: white url(/sites/all/themes/sline/img/circles.svg) center center no-repeat;
                        background-size:86px;
                }
        </style>
</head>

<body>
        <div id="hellopreloader_preload"></div>
        <script type="text/javascript">
                var hellopreloader = document.getElementById("hellopreloader_preload");
                var body = document.body;
                body.style.overflow = "hidden";
               
                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";          
          body.style.overflow = "auto";
                                }          
                        },1 );
                }

                window.onload = function(){      
                        setTimeout(function(){
                                fadeOutnojquery(hellopreloader);},0
                        );          
                };
        </script>

  <?php print $page_top; ?>
/*------------------------------------*/
</body>

Троббер загрузки взят отсюда:
http://samherbert.net/svg-loaders/
Код тоже но изменил.