Materialise CSS Preloader 在加载页面时加载不佳答案

【问题标题】：Materialize CSS Preloader loads poorly when loading the pageMaterialise CSS Preloader 在加载页面时加载不佳
【发布时间】：2017-01-27 19:27:07
【问题描述】：

我正在使用 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

【问题讨论】：

查看您的演示并查看您正在使用的类，看来左侧的圆形剪裁器正在踩着右侧的圆形剪裁器。您是否尝试过从预加载器中的较少元素开始，看看一组更简单的 div 是否可以解决问题？
@JECarterII 这些是具体化在他们的文档中推荐的类，删除部分内容似乎只是以其他方式破坏它。

标签： javascript jquery html css preloader

【解决方案1】：

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

【讨论】：

似乎除了预加载英雄和飞溅英雄（它背后的图像）之外什么都没有显示，它有时仍然加载不稳定：/

【解决方案2】：

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

【讨论】：