ウェブサイトプリローダーjQuery

Question

私はウェブサイトを作っていますが、問題があります。それとももっと正確には、空白ページの問題を解決する方法がわかりません。

私は右にスワイプすると、いくつかのデータがデータベースに埋め込まれ、ウェブページが更新されるウェブサイトを作っています。リフレッシュ後、空白のページが表示され、通常のウェブページがすべてHTMLで表示されます。

DOMの準備が整う前に、空のページにローダーイメージを配置するにはどうすればよいですか？私はjqueryとjquery mobileを使用しています。

ウェブページはhttp://meetmean.comxa.com/KlausApp/home.phpです。右または左にスワイプすると、アラートボックスが表示され、ページが更新されます。後に表示される空白のページを読み込みイメージにしたい。このページからローダーの一部使用することができます

Answer 1

：https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html

Answer 2

を私は同じ問題の種類を持っていたし、私の解決策は次のとおりです。 私は（あなたが話していた空白の1）をカバーし、フルスクリーンブラックとHTMLページページが完全にあなたのhtmlの体のすべてのコンテンツが完全にロードされたときに実行されます

window.onload = function() { $('body').toggleClass('loaded'); }; 

この機能をJavaScriptの

を使用してロードされたときに、背景とのdivでCSSアニメーション、と私はdiv要素を非表示にします。 このコードは、あなたのhtml本文にloadという名前のクラスを追加します。 私のstyle.cssファイルには、ロードされたクラスがフルスクリーンdivを隠すでしょう。それはあなたのページのローダーを持つ方法の一つであり、それはあなた次第です。これを行う多くの方法があります。

Answer 3

SVGアニメーションファイルを持って、ページに表示したい場所に保存します。以前は表示プロパティをnoneにしておいてください。（jQuery）AJAX（つまり$.ajax()）を使用して、使用できるデータを取得していますか？ 完了アニメーションが来るときにSVGをフェードアウトするAJAXオプションのコールバック関数。ここで

function ajaxCall(){ 
    $("#svg").fadeIn("slow"); 
    $.ajax({url: "demo_test.txt", complete: function(result){ 
     $("#svg").fadeOut("slow"); 
    }}); 
} 

はすぐに関数が呼び出されるようSVGアニメーションが表示されます。..とAJAX応答を取得するとすぐにSVGをフェードアウトされます。 読み込みアニメーションを取得するにはhttp://loading.io