Materialize CSS Preloader lädt beim Laden der Seite schlecht

Ich verwende Materialize CSS, um eine schnelle persönliche Website zu erstellen. Die Seite hat ein Fullscreen-Bild/Helden, wenn du es hochlädst, aber es ist groß und braucht ein bisschen, um es zu laden.Materialize CSS Preloader lädt beim Laden der Seite schlecht

Um dies zu verringern, verwende ich den Materialise Circular Preloader (http://materializecss.com/preloader.html). Allerdings ist es eine Art von Jitter, Störungen, rutscht etwa 50% der Zeit, die ich die Seite laden.

Ich verwende Google Chrome, das offenbar keine offenen Probleme hat und manchmal funktioniert. Hier ist der 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>

Und mein Skript sieht jetzt so aus.

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

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

Ich habe versucht, das Bild später laden, nur die preloader zu aktiven Einstellung, wenn das Dokument fertig war, andere preloaders SVG und CSS. Ich kann nicht herausfinden, warum es so glitschig ist und alle diese Lösungen fallen auch diesem an.

Vielleicht etwas mit Keyframes? Sie alle scheinen CSS-Keyframes zu verwenden.

EDIT: Hier ist die Website https://sarj21.github.io

Quelle

2017-01-27 sarj21

Von der Anzeige Ihrer Demo, und mit Blick auf die Klassen, die Sie verwenden, scheint es der Kreis-Clipper links tritt auf den Kreis-Clipper Recht. Haben Sie versucht, mit weniger Elementen in Ihrem Pre-Loader zu beginnen, um zu sehen, ob ein einfacherer Satz von Divs die Probleme löst? –

@JECarterII Das sind die Klassen, die materialise in ihren Dokumenten empfiehlt, und das Entfernen von Teilen davon scheint es nur auf andere Weise zu brechen. – sarj21

Ich denke, ich habe es behoben, das Problem schien zu sein, dass das Bannerbild wirklich groß war (etwas um 4000 x 2000 etwas). Ich habe es kleiner und alles lädt viel glatter und ich sehe keine Probleme mit dem Loader :)

Quelle

2017-01-30 02:19:14 sarj21

Da Sie offenbar versteckt/Elemente mit Javascript zeigen, schlage ich vor, alle Elemente zu display: none in Ihrem Markup Einstellung, dann nur auf Javascript angewiesen später, sie zu zeigen. Das sollte diese Art von Macken beheben. Ich habe diesen Trick mit viel Erfolg benutzt.

Quelle

2017-01-27 19:36:43

Es scheint, als ob ich sogar nichts als den Preloader-Helden und den Splash-Helden (das Ding dahinter mit dem Bild) anzeigen würde, es lädt immer noch gelegentlich: / – sarj21

Materialize CSS Preloader lädt beim Laden der Seite schlecht

Antwort

Verwandte Themen