Materialise CSS 加载页面时预加载器加载不佳

Question

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

为了缓解这种情况，我使用了 Materialise Circular 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>

我稍后尝试加载图像，仅在文档准备好时将预加载器设置为活动状态，其他预加载器使用 SVG 和 CSS。我似乎无法弄清楚为什么它如此故障，所有这些解决方案也都成为了这个问题的牺牲品。

也许有关键帧？他们似乎都使用 CSS 关键帧。

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

Answer 1

既然你显然是 hiding/showing 元素 Javascript，我建议在你的标记中将所有元素设置为 display: none，然后仅依靠 Javascript 稍后显示它们.那应该可以解决这些怪癖。我已经成功地使用了这个技巧。

Answer 2

我想我已经解决了，问题似乎是横幅图片真的很大（大约 4000 x 2000 左右）。我把它变小了，一切都加载得更顺畅了，我发现加载器没有问题:)

Materialise CSS 加载页面时预加载器加载不佳

Materialize CSS Preloader loads poorly when loading the page

html

javascript

css

jquery

preloader