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

Question

I'm using Materialize CSS to make a quick personal site. The site has a fullscreen image / hero when you load up but its big and takes a bit to load.

In order to mitigate this I use the Materialize Circular Preloader ( http://materializecss.com/preloader.html ). However, it sort of jitters, glitches, slides around about 50% of the time I load the page.

I'm using Google Chrome which doesn't seem to have any open issues and it works sometimes. Here is the standard 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>

And my script looks like this right now.

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

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

I tried loading the image later, only setting the preloader to active when the document was ready, other preloaders using SVG and CSS. I can't seem to figure out why it's so glitchy and all of these solutions fall prey to this also.

Maybe something with keyframes? They all seem to use CSS keyframes.

EDIT: Here is the site https://sarj21.github.io

Answer 1

Since you are clearly hiding/showing elements with Javascript, I suggest setting all elements to display: none in your markup, then relying solely on Javascript to show them later. That should fix those kinds of quirks. I've used that trick with a lot of success.

Answer 2

I think I fixed it, the issue seemed to be that the banner image was really big (something around 4000 x 2000 something). I made it smaller and everything loads much smoother and I see no issues with the loader :)