Question

我正在使用Materialise CSS制作一个快速的个人网站。当你加载时，该网站有一个全屏图像/英雄，但它很大，需要一些加载。

为了缓解这种情况，我使用了Materialise Circular Preloader（http://materializecss.com/preloader.html）。然而，在我加载页面的时间大约有50％时，它会产生抖动，故障，滑动。

我正在使用谷歌浏览器，它似乎没有任何未解决的问题，它有时会起作用。这是标准的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

由于您使用Javascript清楚地隐藏/显示元素，我建议您在标记中将所有元素设置为display: none，然后仅依靠Javascript来显示它们。这应该解决这些怪癖。我已经成功地使用了这个技巧。

Answer 2

我想我修好了，问题似乎是横幅图像真的很大（约4000 x 2000的东西）。我把它做得更小，一切都变得更加平滑，我发现加载器没有问题：）

加载页面时，Materialise CSS Preloader加载效果不佳

2 个答案: