Safariで新しいページを読み込む直前にJquery show（）が機能しない

Question

私のサイトは、ページを表示する準備ができる前に、集中的な作業（他のサイトからのデータの取得）を行う必要があります。 何が起こるかは、ユーザーがリンクをクリックすると、回転ホイールのGIFが表示され、ページが読み込まれる準備ができたら表示されます。

これはサファリブラウザでは機能しません（ただしFirefoxの場合）：ホイールが表示されません。

のjQueryコード：

$(function() { 
    $('.show-spinning').on('click', function(e) { 
     $(".spinning-wheel").show() 
    }); 
}); 

CSSコード：

.spinning-wheel { 
    display: none; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 64px; 
    height: 64px; 
    background: url("../images/spinning.gif"); 
} 

コンテナHTMLコード：

なしspinnignホイールwhithを待っているが、一方で、リンクをユーザーがクリックすると、現在のページが表示されたままです

<div class="spinning-wheel"> </div> 

コンテナの.show（）をトリガーすると思われるリンクコード：

<a href="/otherpage" class="show-spinning">Link to other page</a> 

これは私がして、たとえばテストするときに動作しない：

<a href="#" class="show-spinning">test</a> 

リンクは.SHOW（その現実と別のページに送信するときのみだが）サファリで、何もしません。

サファリでこの作業を行うためのトリックや別の方法はありますか？

Answer 1

私はサファリのインサイドアウトについてはわかりませんが、ページリフレッシュサイクルが開始されると、そのページ上でジャバスクリプトを処理し続けるという点は見当たりませんアンロードされる。そうであれば、新しいページがいつでも入ってくる可能性があり、離れて行くはずのページから長時間実行されているスクリプトにブラウザを掛けたくないので、それは意味があります...

Iあなたのオプションはhref='#'リンクを使用し、クリックハンドラの新しいページへのリダイレクトを（スピナーを表示した後に）含めること、またはSPAタイプのアプローチに移行することだと思います。

Answer 2

あなたはリンクのクリックをキャンセルしてスピンホイールを表示してから、リダイレクトをjavascriptで行うことができると思います。

$(function() { 
    $('.show-spinning').on('click', function(e) { 
     e.preventDefault(); 
     $(".spinning-wheel").show() 
     window.location.href = $(this).attr('href'); 
    }); 
}); 

CSSの問題がありますか？固定位置がサファリで異なって動作しているか、.show（）がdisplay：blockを追加していません。

はたぶん

.spinning-wheel.hidden { 
    display:none; 
} 

.spinning-wheel{ 
    display: block; 
} 

は、[OK]をクリックします

$(function() { 
    $('.show-spinning').on('click', function(e) { 
     e.preventDefault(); 
     $(".spinning-wheel").removeClass('hidden'); 
     window.location.href = $(this).attr('href'); 
    }); 
});