Материализация CSS Preloader загружается плохо при загрузке страницы

Я использую Materialize CSS, чтобы сделать быстрый персональный сайт. На сайте есть полноэкранный образ/герой, когда вы загружаете, но его большой и требует немного загрузки.Материализация CSS Preloader загружается плохо при загрузке страницы

Чтобы смягчить это, я использую Циркулярный предварительный загрузчик материализации (http://materializecss.com/preloader.html). Тем не менее, это сотрясение, глюки, слайды примерно в 50% случаев, когда я загружаю страницу.

Я использую Google Chrome, который, похоже, не имеет открытых проблем, и он работает иногда. Вот стандарт CSS

<div class="preloader-wrapper big active"> 
    <div class="spinner-layer spinner-blue-only"> 
     <div class="circle-clipper left"> 
     <div class="circle"></div> 
     </div><div class="gap-patch"> 
     <div class="circle"></div> 
     </div><div class="circle-clipper right"> 
     <div class="circle"></div> 
     </div> 
    </div> 
    </div>

И мой скрипт выглядит так прямо сейчас.

 <script> 
     // $(document).ready(function() { 
     //  $('.preloader-wrapper').addClass('active'); 
     // }); 

     $(window).on('load', function() { 
      $('.preloader').delay(350).fadeOut('slow'); 
      $('.preloader-wrapper').delay(350).fadeOut(); 
     }); 
    </script>

Я попытался загрузки изображения позже, только установив прелоадер к активным, когда документ был готов, другие Preloaders с помощью SVG и CSS. Я не могу понять, почему это так глючит, и все эти решения также становятся жертвой этого.

Возможно, что-то с ключевыми кадрами? Кажется, что они используют ключевые кадры CSS.

EDIT: Вот сайт https://sarj21.github.io

источник

2017-01-27 sarj21

Из просмотра вашей демонстрации и просмотра классов, которые вы используете, кажется, что клипер-клипер слева наступает на круг-клипер правильно. Вы пробовали начать с меньшего количества элементов в вашем предварительном загрузчике, чтобы узнать, разрешает ли более простой набор div проблемы? –

@JECarterII Это классы, которые материализуют рекомендации в своих документах и удаляют их части, похоже, просто нарушают его другими способами. – sarj21

Я думаю, что я исправил его, проблема заключалась в том, что изображение баннера было действительно большим (что-то около 4000 x 2000). Я сделал это меньше, и все загрузилось намного плавнее, и я не вижу проблем с загрузчиком :)

источник

2017-01-30 02:19:14 sarj21

Поскольку вы явно скрытие/отображение элементов с Javascript, я предлагаю установки всех элементов display: none в разметке, то полагаясь исключительно на Javascript, чтобы показать их позже. Это должно устранить эти причуды. Я использовал этот трюк с большим успехом.

источник

2017-01-27 19:36:43

Кажется, что даже я ничего не показываю, кроме героя preloader и героя всплеска (вещь позади него с изображением), он по-прежнему загружает порывистые иногда: / – sarj21

Материализация CSS Preloader загружается плохо при загрузке страницы

ответ

Смежные вопросы