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

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!