jqueryはスピンナーをGoogle Chromeのブラウザでゆっくりとレンダリングする

Question

ボタンをクリックしてブラウザがシーンの裏でアクションを実行していることを示すときにスピナーを表示しようとしています.Firefoxブラウザのボタンをクリックした直後に表示されますGoogle ChromeブラウザでGoogle Chromeブラウザには8秒の遅延があります。私は、アクションが実行されている間、開発者ツールでそれをデバッグしましたが、ボタンがクリックされたときにクラス属性がHTMLコードに追加されているのがわかります。ここで

私のマークアップです：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="loadSpinner" style="display:none;"></div> 
 
    <button type="submit" class="btn spinnerEvent" >On</button> 
 
     
 
    <script> 
 
     $(document).on("click", "button.spinnerEvent", function(event){ 
 
      $('#loadSpinner').addClass('show'); //LOADS THE SPINNER 
 
     }); 
 
    </script> 
 

 
    <style> 
 
     #loadSpinner.show{ 
 
      background:#000 url(../images/spinner-small.gif) no-repeat center center; 
 
      background-color: transparent; 
 
      height: 128px; 
 
      width: 128px; 
 
      position: fixed; 
 
      z-index: 1000; 
 
      left: 50%; 
 
      top: 25%; 
 
      margin: -25px 0 0 -25px; 
 
     } 
 
    </style>

Answer 1

私はあなたのコードに若干の変更と作業フィドル作成しました： https://jsfiddle.net/jennifergoncalves/783gyyou/2/

HTML：

が削除をスタイルタグですべてのスタイルを設定する

：そのインラインスタイルとして3210はstyleタグ

<div id="loadSpinner"></div> 
<button type="submit" class="btn spinnerEvent">On</button> 

CSSで定義されているあなたのCSSスタイルよりも優先されます。

#loadSpinner { 
    display: none; 
} 

#loadSpinner.show { 
    background: #000 url(../images/spinner-small.gif) no-repeat center center; 
    background-color: red; /*changed from transparent to red so you can see the div, even though I don't have access to the actual image*/ 
    height: 128px; 
    width: 128px; 
    position: fixed; 
    z-index: 1000; 
    left: 50%; 
    top: 25%; 
    margin: -25px 0 0 -25px; 
    display: block; 
} 

Google Chromeでは、ロード先のdivがボタンをクリックするとすぐに表示されます。

まだ問題が解決しない場合は、回転する画像をページにプリロードしてみてください。単純に、画像そのものに時間がかかることがあり、コードに遅延がないことがあります。ここで

ページのロード後の背景として使用するCSSの画像をプリロードする方法についていくつかのヒントがあります：https://css-tricks.com/snippets/css/css-only-image-preloading/