Implementierung der unendlichen Schriftrolle in JQuery

Zusammenfassung der Schlüsselpunkte

• Infinite Scrolling (auch als faules Laden oder kein Paging bezeichnet) ist eine Alternative zum Paging, das neue Inhalte über AJAX lädt, wenn der Benutzer das Scrollen vorhandener Inhalte auf der Seite abschließt.
• Obwohl das Infinite Scrollen viele Vorteile hat, hat es auch einige Nachteile, z. Um Probleme mit Suchmaschinen zu vermeiden, sollten Alternativen mit Paging oder Standortkarten bereitgestellt werden.
• Implementierung der Infinite Scrolling beinhaltet das Erstellen grundlegender HTML- und CSS -Layouts, das Einrichten des Ajax -Modus für die Verarbeitungsanforderungen, das Anhängen neuer Daten an der Seite und das Beenden von Verarbeitungsdaten.
• Die Implementierung von Infinite Scrolling kann durch Löschen der Schaltfläche und das Aufrufen der Funktion weiter verbessert werden Erläutern Sie die Reaktion von JSON, ob die Anfrage korrekt abgeschlossen wurde und ob weitere Beiträge geladen werden müssen.

Webentwickler haben sich lange an traditionelle Paging zugewandt, wenn viele Inhalte angezeigt werden müssen. Ja, Pagination ist immer noch eine sehr effektive Möglichkeit, Inhalte anzuzeigen, aber in diesem Artikel werden wir eine Alternative diskutieren - unendliches Scrollen. Diese Technik wird auch als fauler Laden oder keine Pagination bezeichnet. Wenn der Benutzer vorhandene Inhalte auf der Seite die Bildlaufdatum vervollständigt, lädt er neue Inhalte über AJAX. Einige Internetgiganten, einschließlich Facebook und Pinterest, verwenden unbegrenztes Scrollen. In diesem Artikel werden wir diskutieren, dass Sie Ihr eigenes JQuery -Plugin für unendlich scrollen erstellen.

Händler und Tiefen

Die Vorteile sind offensichtlich. Um mehr Inhalte zu erhalten, müssen Sie nicht zu einer neuen Seite umgeleitet werden (dies verlagert Ihre Aufmerksamkeit auf verschiedene Bereiche, wenn die Seite geladen wird). Durch die Implementierung von Infinite Scrollen können Sie den Fokus des Benutzers auf die Seite im Grunde steuern! Unendlich scrollen sind in allen Fällen nicht wirksam. Wenn der Benutzer beispielsweise auf einen Link klickt und die zurückbrowser -Schaltfläche verwendet, verliert der Benutzer den Speicherort im Datenstrom, der über AJAX geladen wird. Eine Sache, die Sie bei der Implementierung dieser Funktion feststellen sollten, ist das Laden neuer Inhalte in einer neuen Registerkarte oder einem neuen Fenster. Der damit verbundene Nachteil des unendlichen Scrollens besteht darin, dass er den Ort im Stream nicht speichern kann. Angenommen, Sie möchten Inhalte auf der unbegrenzten Scrolling -Seite mit Freunden per E -Mail weitergeben. Sie können dies nicht tun, weil die URL Sie zum ersten Ort zurückbringt. Bevor Sie sich entscheiden, es weiter zu verwenden, berücksichtigen Sie die Verfügbarkeit Ihrer Website. Denken Sie auch daran, dass es nicht sehr suchmaschinenfreundlich ist, bevor das unendliche Scrollen implementiert wird. Um Probleme mit der Sichtbarkeit von Suchmaschinen zu vermeiden, stellen Sie sicher, dass Sie eine Alternative mit einer Paging- oder Site -Karte bereitstellen.

starten

Wir werden zunächst eine sehr einfache Seite erstellen. Das Folgende zeigt die wichtigen Teile des Beispiels HTML und CSS. Der Rest der Dateien kann durch Klicken auf den Demo -Link am Ende dieses Tutorials angezeigt werden.

html

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

CSS

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

Grundlegende Workflow

Wenn Sie das von uns erstellte Dokument anzeigen, sollten neue Beiträge geladen werden, wenn Sie auf die Schaltfläche Mehr laden. Hier sind einige Punkte zu berücksichtigen.

• Anfragen müssen an die URL gestellt werden, mit der das neue Element an die Seite angehängt werden soll.
• Wenn Sie erneut auf die Schaltfläche klicken, sollte dieser Vorgang wiederholt werden, aber beim zweiten Mal sollten Sie einen neueren Beitrag zurückgeben.
• Neue Beiträge sollten für jede nachfolgende Anfrage bereitgestellt werden, bis keine weiteren Beiträge angezeigt werden sollen.
• Wenn keine Beiträge mehr übrig sind, sollten Sie dem Benutzer mitteilen, dass er das Ende erreicht hat.

AJAX -Modus

Idealerweise müssen Sie eine Variable deklarieren, um die Seitennummer zu speichern, die wiederum die URL ändert, an die Sie die Anfrage senden möchten. In unserer Demo haben wir drei solcher Seiten - 2.html, 3.html und eine leere 4.html (zu Demonstrationszwecken). Wenn Sie auf die Schaltfläche klicken, um weitere Beiträge zu laden, dauert es einige Zeit, bis die Anforderung erfolgreich abgeschlossen ist und ein neues Projekt geladen wird. In diesem Fall werden wir die Schaltfläche Lade ausblenden und einen Text anzeigen, der angibt, dass das neue Projekt geladen wird:

<div id="data-container">
  <div class="data-item">
    Hi! I am the first item.
  </div>
  <div class="data-item">
    Hi! I am the second item.
  </div>
  <div class="data-item">
    Hi! I am the third item.
  </div>
  <div class="data-item">
    Ok, this is getting boring.
  </div>
  <div class="data-item">
    Let's try something new.
  </div>
  <div class="data-item">
    How about loading some more items through AJAX?
  </div>
  <div class="data-item">
    Click the button below to load more items.
  </div>
</div>
<div id="button-more" onclick="lazyload.load()">
  Load more items
</div>
<div id="loading-div">
  loading more items
</div>

Daten an Seite

anhängen

Zunächst müssen wir die Änderungen, die wir bei der Anforderung vorgenommen haben, rückgängig machen, d. H. Die Lade -Schaltfläche erneut anzeigen und den Text ausblenden. Zweitens müssen wir die Antwort anhängen, die wir an der Liste der bereits auf der Seite vorhandenen Elemente erhalten. Beachten Sie, dass wir in der Demo direkt HTML -Tags erhalten, um den Vorgang zu vereinfachen. Sie können auch eine JSON -Antwort senden und weitere Variablen wie Nachrichten oder Status hinzufügen. Der zusätzliche Code ist unten angezeigt.

#data-container {
  margin: 10px;
}

#data-container .data-item {
  background-color: #444444;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding: 5px;
  margin: 5px;
  color: #fff;
}

#loading-div {
  display: none;
}

#button-more{
  cursor: pointer;
  margin: 0 auto;
  background-color: #aeaeae;
  color: #fff;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

Ende der Verarbeitungsdaten

Sobald Sie das Ende des Beitrags erreicht haben, müssen Sie dem Benutzer zeigen, dass auf der Seite keine Beiträge mehr zu laden sind. Dies kann auf verschiedene Arten erfolgen. Wir können Zustände über Code oder Nachrichten senden, die in die Antwort selbst eingebettet sind. Da wir jedoch in diesem Fall HTML -Tags direkt verwenden, repräsentiert die leere Antwort das Ende des Streams.

$(buttonId).hide();
$(loadingId).show();

Schlussfolgerung

Die von uns vorgeschlagene Demonstration ist sehr grundlegend und wir können es besser machen, wenn wir uns mehr Mühe geben. Zunächst können wir die Schaltfläche vollständig löschen und die Funktion aufrufen, wenn der Benutzer bis zum Ende der Seite nach unten scrollt. Dadurch wird der zusätzliche Schritt beseitigt, damit der Benutzer auf die Schaltfläche klickt und den gesamten Vorgang schneller macht. Zweitens können wir nur Rohdaten über JSON senden und Tags mit JQuery selbst erstellen. Zum Beispiel:

$(buttonId).show();
$(loadingId).hide();
$(response).appendTo($(container));
page += 1;

Schließlich kann die JSON -Antwort eine Nachricht enthalten, dass die Anforderung korrekt abgeschlossen ist, die Daten und ob mehr Beiträge zum Laden sind. In diesem Fall ist dies eine effizientere Möglichkeit, eine Antwort zu senden. Weitere Informationen zum unbegrenzten Scrollen finden Sie auf Websites, die speziell für diesen Zweck erstellt wurden. Es enthält allgemeine Informationen über die Idee und vorhandene Tools, die Sie auf der Website verwenden können, um sie zu implementieren. Eine Live -Demo finden Sie auf der Github -Seite. Der Code ist auch auf GitHub verfügbar.

(Der FAQ-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der Inhalt des FAQ-Teils ist sehr übereinstimmend mit dem Originaltext, Pseudo-Original ist schwierig und schwierig und Nach der Änderung wirkt sich die Integrität des Artikels und logisch aus

Das obige ist der detaillierte Inhalt vonImplementierung der unendlichen Schriftrolle in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!