Der Ladebildschirm für meine Website verschwindet nicht

Ich lade ein großes Bild für den Hintergrund meiner Website, also habe ich mich entschlossen, statt mit chaotisch einen netten kleinen Preloader mit CSS und Jquery hinzuzufügen.Der Ladebildschirm für meine Website verschwindet nicht

Rechts innerhalb der <body> Tag habe ich:

<!-- CSS Spinner --> 
<div class="spinner-wrapper"> 
    <div class="spinner"> 
     <div class="rect1"></div> 
     <div class="rect2"></div> 
     <div class="rect3"></div> 
     <div class="rect4"></div> 
     <div class="rect5"></div> 
     <em class="spinner-text">One moment</em> 
    </div> 
</div>

Dann vor dem letzten Tag </body> Ich habe dieses Skript:

<!-- Spinner --> 
<script> 
    $(document).ready(function() { 
     $(window).load(function() { 
      preloaderFadeOutTime = 500; 

      function hidePreloader() { 
       var preloader = $('.spinner-wrapper'); 
       preloader.fadeOut(preloaderFadeOutTime); 
      } 
      hidePreloader(); 
     }); 
    }); 
</script>

Wenn ich die Datei index.html direkt öffnen, es funktioniert perfekt, aber als ich versuchte, es auf meiner Website zu laden (link) zeigt es nur den Preloader für immer.

Interessanterweise habe ich festgestellt, dass der Preloader die meiste Zeit funktioniert, wenn ich das Netzwerkfenster in der Entwicklerkonsole öffne.

Weiß jemand, was zum Teufel hier los ist?

Quelle

2017-02-14 Parker Thomas

Haben Sie 'jQuery' auf Ihrer Website hinzugefügt? :) –

@Kinduser ja! Es ist gegen Ende der Datei, aber immer noch vor dem Skript, das ich verwende. Soll ich es auf die verschieben? –

Ich bin mir nicht sicher, aber wird nicht schaden, wenn Sie versuchen :) –

Versuchen Sie, Ihren jQuery innerhalb des head Tag zu importieren.

Quelle

2017-02-14 19:13:12

Das Hinzufügen dieses Attributs (data-cfasync = "false") innerhalb von JS funktioniert nicht, um das Skript vom Rocket Loader auszuschließen. Rocket-Loader ignorieren einzelne Skripte, indem Sie den Daten-cfasync = „false“ -Attribut auf den entsprechenden Skript-Tag, zum Beispiel:

<script data-cfasync="false" src="/javascript.js"></script>

Quelle

2017-02-14 19:12:04

Der Ladebildschirm für meine Website verschwindet nicht

Antwort

Verwandte Themen