当加载页面时，Materialize CSS Preloader加载不佳

Question

我正在使用Materialize CSS来创建一个快速的个人站点。该网站有一个全屏图像/英雄，当你加载，但它很大，需要一点加载。

为了缓解这个问题，我使用了物化循环预加载器( Materialize Circular，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>

我稍后尝试加载图像，仅在文档准备就绪时将预加载器设置为活动，其他预加载器使用SVG和CSS。我似乎不明白为什么它会如此不稳定，所有这些解决方案也都成为了这一点的牺牲品。

也许是一些关键帧的东西？它们似乎都使用CSS关键帧。

编辑:这是站点https://sarj21.github.io

Answer 1

我想我解决了它，问题似乎是横幅图像真的很大(大约4000 x 2000左右)。我把它做得更小了，所有的加载都更流畅了，而且我认为加载器没有任何问题:)

Answer 2

由于使用Javascript可以清楚地隐藏/显示元素，因此我建议在标记中将所有元素都设置为display: none，然后完全依靠Javascript稍后显示它们。这应该可以解决这些怪癖。我用过这个技巧，并取得了很多成功。