JQTouch - Anytime Laden auftritt, eine Belastungsklasse hinzufügen?

Question

Ich verwende jQTouch und in jQTouch mehrere der Verbindungen werden über AJAX seinen Laden und dann in schieben. Das Problem ist, dass es keine Ladeanzeige für die Nutzer ist.

Ich würde einen Weg, wie eine Lade-Klasse mit einem AJAX-Spinnern an, wann immer die ein Ajax-Aufruf wird geladen, und habe die Klasse entfernt, wenn das Laden abgeschlossen ist, und die Seite angezeigt wird.

Irgendwelche Ideen?

Answer 1

Dies ist das grundlegende Verhalten, wenn Sie Ihre Links li class = „Pfeil“ Elemente sind. wie angezeigten Sie Ihre Links und wo wollen Sie die Lade-Spinner Anzeige?

Answer 2

die showPageByHref () Antwort ist teilweise richtig.

Aber statt

$('body').append('<div id="loadinginprogress">Loading...</div>');

Sie brauchen,

$('.current').append('<div id="loadinginprogress">Loading...</div>');

Der Körper ist zu allgemein für jQTouch, müssen spezifisch für die aktuell angezeigte DIV-Seite sein

Answer 3

showPageByHref () Funktion in jQTouch js ist ein guter Anfang. Ich habe es rechts in die Ajax-Aufruf so die Bitte warten Sie nicht flackern, wenn Sie auf den Link klicken, der bereits geladen etc.

Kurz gesagt - Add Laden div (id loadinginprogress in exmaple) direkt vor dem Ajax-Aufruf, und entfernen Sie später "Erfolg" oder "Fehler". der Ajax-Aufruf Abschnitt würde so etwas (verkürzt es) aussehen:

function showPageByHref(href, options) {
...
if (href != '#'){
    $('body').append('<div id="loadinginprogress">Loading...</div>');
    $.ajax({
        url: href,
        data: settings.data,
        type: settings.method,
        success: function (data, textStatus) {
            $('#loadinginprogress').remove()
            var firstPage = insertPages(data, settings.animation);
            if (firstPage)
            {
                if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
                {
                    settings.$referrer.attr('href', '#' + firstPage.attr('id'));
                }
                if (settings.callback) {
                    settings.callback(true);
                }
            }
        },
        error: function (data) {
            $('#loadinginprogress').remove()
            if (settings.$referrer) settings.$referrer.unselect();
            if (settings.callback) {
                settings.callback(false);
            }
        }
    });
}
...
}

CSS für das Laden div wäre so etwas wie:

#loadinginprogress {
    -webkit-border-radius: 10px;
    background-color: rgba(0,0,0,.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    left: 60px;
    line-height: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 120px;
    width: 200px;
    z-index: 5000;
}

Answer 4

Vielen Dank für Ihre verschiedenen Beiträge. Sie hat mir sehr geholfen.

Ich habe eine Lösung vorzuschlagen, ohne den Code jQTouch Patchen auf dem jQTouch beruht. Es nutzt jQuery Ajax-Fähigkeiten.

$(document).ready(function() {
...
  $('#jqt').ajaxStart(function() {
    console.log("ajaxStart");
    ...
  }).ajaxSuccess(function() {
    console.log("ajaxSuccess");
    ... 
  }).ajaxError(function() {
    console.log("ajaxError");
    .... 
  });
....
});

Weitere Informationen in diese jQuery doc Seite .

Answer 5

Sie können eine benutzerdefinierte Ereignishandler hinzufügen, und lösen die loading.gif jedes Mal den Klick auf das spezifische Element durchgeführt wurde.

Answer 6

Ich antwortete nur Frage des Darin Parker. Probier es mal aus es Ihnen helfen kann.