Beste Vorgehensweise bei der Verwendung von AJAX-Loadern?

Question

Ich habe ein paar schlechte Lösungen für das Aufrufen eines AJAX-Loaders vor der dynamischen Aktualisierung eines Inhalts DIV implementiert, aber keine scheinen "universal" zu sein, und ich finde jedes Mal, wenn ich es tue, ich bin Nacharbeit es. Wenn ich ein DIV mit Inhalt habe, der je nachdem, was ein Benutzer auf der Seite klickt, aktualisiert wird, und ich den Loader über diesem Inhalts-DIV anzeigen möchte, was ist der beste Ansatz? Ich habe gesehen, dass einige Entwickler den Lader immer auf der Seite haben und ihn nur als Block oder ohne anzeigen, und ich habe gesehen, dass andere ihn an das DIV anhängen. Was ist, wenn Sie auch mehrere Bereiche haben, die aktualisiert werden können? Ich denke, etwas wiederholbar, dass ich mit einer Funktion aufrufen können, vielleicht ein paar Parameter übergeben.

Answer 1

Einige JavaScript-Bibliotheken erlauben es, das Öffnen und Schließen von Anfragen zu überwachen. Sehen Sie sich den Request Responder von Prototype an http://www.prototypejs.org/api/ajax/responders .

Sie würden etwa so vorgehen:

Ajax.Responders.register({
  onCreate: function() {
    $('loader').show();
    Ajax.activeRequestCount++;
  },
  onComplete: function() {
    Ajax.activeRequestCount--;
    if (Ajax.activeRequestCount < 1) $('loader').hide();
  }
});

Was die visuelle Darstellung des Ladevorgangs betrifft, so können Sie die verschiedenen Teile Ihrer Seite, die möglicherweise separate Ladegrafiken erfordern, identifizieren und das Request-Objekt untergliedern, wobei jedes Mal die Art der Anforderung angegeben wird.

z.B.
Ist es ein Feld, das gespeichert wird? new FieldUpdateRequest(field)
Liegt es an der geladenen Seite? new Request();
Wird ein Container aktualisiert? new PartialRequest(div);

Erfassen Sie dann jeden Unterklassentyp und zeigen oder verbergen Sie eine andere Ladegrafik.

Es gibt leider keine schnelle Lösung, hal. Du könntest ein generisches Skript zum Anhängen von Ladegrafiken an Container erstellen, das sollte dir einige Wiederholungen ersparen. Wenn du das tust, könntest du es hier posten :)?

Answer 2

Sie könnten eine JQuery-Fortschrittsbalken oder etwas Ähnliches in einer anderen Bibliothek.