jquery mobile同じページのローダー付アプリ

Question

私が抱えている課題は、jQueryモバイルを使用するCordovaアプリケーションを構築しており、多くの機能を単一のページのアプリのアプローチで使用しています。

ページを選択すると、そのページにaJaxコールのコンテンツが動的に取り込まれます。ただし、aJax呼び出しが返されるまで、ページはすでに開かれています。どのようにaJaxが返るまで、ローディング画面を置くことができますか？

下記のサンプルコードを参照してください。

#loading-img { 
     background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat; 
     height: 100%; 
     z-index: 20; 
    } 

    .overlay { 
     background: #e9e9e9; 
     display: none; 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     opacity: 0.5; 
    } 

CSS

<a href="#profilepageself" class="leavingChatPage" id="goToProfile" >Profile</a> 

リンク

$("#goToProfile").on("click",function(event){ 
    $(".overlay").show(); 
    console.log("going to profile"); 
}); 

私のページをロードするための私は、上記のJSは、リンクをクリックしたときにトリガーすると、すべてをぼかし想像。

$.get(url, function(data) { 
    $.each(data.items, function (index, event) { 
     console.log('founda practice %o',event); 
     //create my html 
     .......... 

    }); 
    $(".overlay").hide(); 
}); 

その後、aJaxが返されたら私はそれを隠してしまいます。

これはまったく動作しないようです。理由は分かりません。

あなたが .alwaysコールバックを使用することができます

Answer 1

：ここ

$.get(url, function(data) { 
    $.each(data.items, function(index, event) { 
     console.log('founda practice %o', event); 
     //create my html 
     .......... 
    }); 
    }) 
    .always(function() { 
    $(".overlay").hide(); 
    }); 

が参照です：https://api.jquery.com/jquery.get/

はまた、jQuery.get()はAjaxのためだけの速記である、あなたはまた、オープンとAJAX呼び出しの内部であなたのローダーを閉じることができますが

$.ajax({ 
    beforeSend: function(){ 
    $(".overlay").show(); 
    }, 
    success: function(data){ 
    $.each(data.items, function (index, event) { 
     console.log('founda practice %o',event); 
     //create my html 
     .......... 
    }); 
    }, 
    complete: function(){ 
    $(".overlay").hide(); 
    } 
}); 

ご存知ですか？jQuery Mobileには独自のローダーがありますか？あなたはVelocity.gifより良いが、単にajax-loader.gifに名前を変更し、（あなたがCSS/imagesのフォルダにそれを見つけるでしょう）デフォルトのJQMのファイルを上書きしたい場合http://demos.jquerymobile.com/1.4.5/loader/

：ここ

はデモです。次に、あなたがしたいようにそれをスタイルと標準JQM機能を使用することができます。

$.mobile.loading("show"); 
$.mobile.loading("hide"); 

この方法は、それがすでに内蔵されているようJQMに、あなたも（デモをチェックし、オーバーレイを作成する必要はありません）。