jquery mobile same page app mit loader

Question

Die Herausforderung, die ich habe, ist die Erstellung einer Cordova App, die jQuery Mobile verwendet und ich verwende eine einzelne Seite App-Ansatz für eine Menge der Funktionalität.

Wenn ich also eine Seite auswähle, beziehe ich diese Seite dynamisch mit Inhalt von einem AJAX-Aufruf. Die Seite ist jedoch bereits geöffnet und leer, bis der aJax-Aufruf zurückgegeben wird. Wie kann ich einen Ladebildschirm anlegen, bis der aJax zurückkehrt?

Siehe Beispielcode unten.

#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; 
    } 

DER CSS

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

Der Link für meine Seite

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

Ich stelle mir die oben JS auslösen Laden würde, wenn der Link angeklickt wird und würde alles verwischen.

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

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

Dann, sobald der AJax zurückgegeben wurde, würde ich es verstecken.

Dies scheint überhaupt nicht zu funktionieren. Nicht sicher warum.

Answer 1

Sie die .always Rückruf verwenden:

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

hier ist der Hinweis: https://api.jquery.com/jquery.get/

Außerdem ist jQuery.get() nur eine Abkürzung für Ajax, Sie können auch öffnen und Ihren Lader innerhalb der Ajax-Aufruf schließen wie folgt:

$.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(); 
    } 
}); 

BTW, sind Sie sich bewusst, dass jQuery Mobile seinen eigenen Loader hat? Hier

ist die Demo: http://demos.jquerymobile.com/1.4.5/loader/

Wenn Sie möchten besser Velocity.gif, einfach zu ajax-loader.gif umbenennen und überschreiben die Standard JQM-Datei (Sie werden es im CSS/images Ordner finden). Dann können Sie es Stil wie Sie wollen, und verwenden Sie die Standard JQM Funktionen:

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

Auf diese Weise, Sie brauchen nicht einmal die Überlagerung zu schaffen, wie es bereits eingebaut ist in JQM (überprüfen Sie die Demo).