ページを読み込んでスピナーをロードすると表示されます

Question

読み込み時にページの内容に読み込み用のGIFをオーバーレイしたいとします。しかし、それらはajax経由でロードされません。私はそのチャンネル経由で表示するいくつかのソリューションを見てきました。問題は、jQueryテーブルに検索結果が表示され、多くの結果がMySqlを介して返された場合、テーブルがレンダリングするのに時間がかかることです。ページ上にオーバーレイを重ねて、javascriptとjQueryのレンダリングを非表示にしたいと思います。誰かがこれを達成する方法を説明したり、素晴らしいチュートリアルを教えてくれますか？ページの内容は外部ソースから読み込まれません（PHP変数で設定されたデータベースの値を除いて）。

ありがとうございました！

Answer 1

ラップトップdivをお持ちの場合は、display:none or opacity:0を追加し、スピンローダーを置くラッパーdivについて追加してください。あなたのjQueryで

ないが、このような何かを追加します。

$(document).ready(function(){ 
    $('#wrapper').show(); 
});

をあなたはまた、代わりにshow()

Answer 2

のにもいくつかのアニメーションを追加することができますあなたを待っている場合は、この

.loading 
{ 
    background-image: url('loadingImage.png'); 
    background-color: #FFFFFF; 
    border: 1px solid #CCCCCC; 
    color: #000000; 
    padding: 10px 30px; 
    position: absolute; 
    text-align: center; 
    width:100px; 
    z-index:100; 
} 

$(document).ready(function(){ 
    $('#wrapper').append("<div class='loading' />").fadeIn(); 
}); 

Answer 3

をお試しくださいサーバーでページの計算を終了し、PHPを使用している場合は、PHP関数ob_flush（）を使用して出力バッファをフラッシュできます。

ローダーを表示するためのhtmlコードを入力し、バッファーをフラッシュします。その後、しばらく時間がかかるデータベースクエリを実行します。ロードの進行状況に関する状況の更新を可能な限り行うことができるように、バッファを頻繁にフラッシュすることができます。