2012-04-17 7 views
11

Ich mache eine Website mit endlosem Scrollen. Das heißt, wenn der Benutzer zum Ende der Seite scrollt, wird ein neuer Inhaltsblock an den unteren Rand angehängt. Es ist sehr ähnlich zu Facebook. Hier ist ein Beispiel von drei Seiten geladen:Wie speichere ich einen unbegrenzten Stapel von AJAX-Inhalten, wenn ein Benutzer die Seite verlässt?

_________ 
|   | 
| 0 | 
|_________| 
|   | 
| 1 | 
|_________| 
|   | 
| 2 | 
|_________| 

Wenn der Benutzer etwas auf der letzten Seite klickt, ich nehme sie an eine separate Detailseite. Wenn der Benutzer jedoch zurück auf die Suchergebnisseite klickt, habe ich keine Erinnerung an seinen vorherigen Speicherort und muss Seite 0 erneut laden.

_________ 
|   | 
| 0 | 
|_________| 

Ich kenne einige der alten Schule Methoden, um dies zu lösen, aber sie haben jeweils einige schwerwiegende Probleme:

Hash URL

Ich konnte die URL aktualisiert jedes Mal, wenn eine neue Seite geladen wird. Zum Beispiel: www.website.com/page#2. Wenn der Benutzer auf die Detailseite geht und zurück, teilt die URL mir die zuletzt geladene Seite, so dass ich es für ihn laden:

_________ 
|   | 
| 2 | 
|_________| 

Aber das ist eine schlechte Benutzererfahrung. Nur Seite 2 ist geladen. Der Benutzer kann nicht nach oben scrollen, um ältere Inhalte zu sehen. Ich kann nicht nur die Seiten 0, 1 und 2 laden, da dies den Server überlasten würde, wenn man bedenkt, dass die Zurück-Schaltfläche 50% des Internetverkehrs ausmacht (Jacob Nielsen-Studie).

Local Storage

Cookies haben nicht die Speicherkapazität viele Seiten von Daten zu speichern. Local Storage sollte ausreichend Platz haben. Eine Idee besteht darin, alle geladenen Seiten im lokalen Speicher zu speichern. Wenn der Benutzer zu den Suchergebnissen zurückkehrt, lade ich vom lokalen Speicher, anstatt den Server zu treffen. Das Problem mit diesem Ansatz ist, dass ein großer Teil meiner Benutzer in Browsern ist, die nicht support local storage (IE7) sind.

+0

Warum würde das Laden aller Seiten, die Sie auf einmal angezeigt haben, den Server überlasten, wenn Sie sie gleichzeitig anfordern 1? – Tejs

+2

... mit einer unendlichen Menge an Speicher. – Phrogz

+1

@ Tejs: Ich habe meinen Gedanken falsch formuliert. Ich meine, dass das Laden von hundert Seiten auf einmal für den Benutzer langsam ist und den Server unnötig belastet. – JoJo

Antwort

1

Angesichts der Einschränkungen Ihres Problems die einzige plausible Lösung, die ich denken könnte, wäre, die Höhen der vorherigen Seiten zu cachen und dann zu laden, wenn der Benutzer hoch scrollt. Dadurch wird das Scrollen nach oben blockiert und Sie können eine Last auslösen, wenn der Benutzer nach oben schaut. Zusätzlich, wenn Sie ein bisschen mehr Phantasie wollen, würde ich versuchen, eine Möglichkeit zu finden, die Bildlaufleiste einzufrieren, um zu verhindern, dass der Benutzer über die vorherige unbelastete Seite hinaus scrollt. Auf diese Weise können sie nicht mehrere Seiten gleichzeitig laden.

1

Anstatt den Benutzer zu einer separaten Detailseite zu führen, verstecken Sie stattdessen einfach den Hauptscrolling-Inhalt, laden Sie den Detailinhalt über Ajax/XMLHttpRequest() und machen Sie dann diesen Inhalt sichtbar? Mit anderen Worten, wie Facebook es tut. Ich nehme an, ob Sie das tun können, hängt davon ab, was der Inhalt ist und ob es etwas ist, das Sie entwerfen und steuern, oder ob es etwas Äußeres ist.

+1

Sie können sogar die URL ändern und den Zurück-Button mit 'history.pushState' und' window.onpopstate' bearbeiten :-) –

+0

@Rocket: Das ist sehr interessant und ich hatte keine Ahnung davon. Das ist etwas, was ein eigenes Projekt wirklich nutzen würde, das Ajax vollständig nutzt, um viele Inhalte auf einer Seite zu bearbeiten. Vielen Dank für das Teilen. – Trevor

+0

Die Detailseite liegt außerhalb meiner Kontrolle. Ich muss auf eine neue physische Seite gehen. – JoJo

Verwandte Themen