2017-02-14 3 views
2

私は自分のウェブサイトの背景のために大きな画像を読み込んでいますので、厄介なのではなく、CSSとJqueryで素敵なプリローダーを追加することにしました。その後私のウェブサイトの読み込み画面は消えていません

<!-- 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> 

、終了</body>タグの前に、私はこのスクリプトを持っている::右、私が持っている<body>タグ内

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

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

私が直接index.htmlファイルを開くと、それが動作完璧ですが、私のウェブサイト(link)にロードしようとしていたとき、それはプリローダーを永遠に示しています。

興味深いことに、デベロッパーコンソールでネットワークパネルを開くと、ほとんどの場合プリローダーは想定されているとおりに動作することがわかりました。

ここで何が起こっているのか誰も知っていますか?

+0

あなたのウェブサイトに 'jQuery'を追加しましたか? :) –

+1

@Kinduserはい!それはファイルの最後に向かっていますが、まだ使用しているスクリプトの前です。 に移動する必要がありますか? –

+0

私は確信していませんが、試しても害はありません:) –

答えて

1

headタグ内にごjQueryをインポートしてください。

0

JS内でこの属性(data-cfasync = "false")を追加しても、スクリプトをRocket Loaderから除外することはできません。ロケットローダーは、例えば、関連するスクリプトタグへのデータcfasync =「false」属性を追加することにより、個々のスクリプトを無視:

<script data-cfasync="false" src="/javascript.js"></script> 
関連する問題