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

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

私はウェブサイトを作っています、あなたが右にスワイプするならば、いくつかのデータはデータベースに秘密になります、そしてそれからウェブページはリフレッシュします。更新後、空白のページが表示され、次に通常のWebページがすべてHTMLで表示されます。

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

ウェブページはこれです: http://meetmean.comxa.com/KlausApp/home.php。右または左にスワイプすると、警告ボックスが表示され、その後ページが更新されます。後に表示される空白ページを読み込み中の画像にします。

0
追加された 著者 bens,

4 答え

You could use some of loaders from this page: https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html

1
追加された

私は同じような問題を抱えていました、そして私の解決策は以下のとおりです。 私はdivでフルスクリーンの黒い背景とcssアニメーションで(あなたが話していた空白の)HTMLページをカバーしました。

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

この関数はあなたのhtmlボディのすべてのコンテンツが完全にロードされたときに実行されます。 このコードはあなたのhtmlボディにloadedという名前のクラスを追加します、 私のstyle.cssファイルでは、ロードされたクラスは全画面divを隠します。それはあなたのページにローダーを持つ方法の一つであり、それはあなた次第です、これをする多くの方法があります。

1
追加された

私は同じような問題を抱えていました、そして私の解決策は以下のとおりです。 私はdivでフルスクリーンの黒い背景とcssアニメーションで(あなたが話していた空白の)HTMLページをカバーしました。

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

この関数はあなたのhtmlボディのすべてのコンテンツが完全にロードされたときに実行されます。 このコードはあなたのhtmlボディにloadedという名前のクラスを追加します、 私のstyle.cssファイルでは、ロードされたクラスは全画面divを隠します。それはあなたのページにローダーを持つ方法の一つであり、それはあなた次第です、これをする多くの方法があります。

1
追加された

SVGアニメーションファイルを取り、ページ内のどこにでも表示したい場所に保存します。(jQuery)AJAXを使用している場合(つまり $ .ajax())データを取得するには、AJAXオプションの完了時コールバック関数を使用して、アニメーションが来たときにSVGをフェードアウトさせることができます。

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

Here as soon as the function is called the SVG animation appears.. and soon as AJAX gets response the SVG is faded out. You can get loading animations from http://loading.io

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript