Was ist der beste Weg, um eine Side-Scrolling-Website schnell zu laden?

Question

Ich bin neu im Stack-Overflow und Programmierung, also vergib mir für jede peinliche Formulierung!

Ich baue eine Side-Scrolling-Website, die Grafik-reiche und 680x9400px Größe ist. Ich werde einige Javascript und/oder Mootools verwenden, um einen coolen Side-Scrolling-Effekt zu erzeugen, ähnlich wie http://sursly.com.

Ich bin Web-Optimierung aller verwendeten Bilder, würde aber gerne wissen, ob jemand andere Ideen hat, wie man das Laden von Seiten beschleunigt? Gibt es eine Möglichkeit, die Website beispielsweise in horizontalen Abschnitten vorzuladen?

Vielen Dank im Voraus.

Answer 1

Mit etwas wie der jQuery Lazy Loading Plugin können Sie eine wahrgenommene Beschleunigung erhalten, da nur die sichtbaren Bilder geladen werden. Sie werden also nicht mit Off-Screen-Bildern konkurrieren.

Ich weiß, dass Sie wahrscheinlich mootools verwenden werden, aber es würde mich überraschen, wenn sie nicht etwas ähnliches hätten.

Answer 2

Beachten Sie, dass die meisten Grafiken auf der Sursly-Site rein schwarz und weiß sind. Dadurch wird die Website erheblich schneller geladen, da die Dateien sehr weit unten optimiert werden können.

Answer 3

Ich stimme der Antwort von Past One zu, würde diese aber leicht ändern: Anstatt sie so zu laden, wie Sie es brauchen, laden Sie sie, wenn Sie können. Laden Sie zunächst nur die erste Seite. Sobald das geladen ist, laden Sie die zweite, dann die dritte und so weiter.

Behalten Sie im Auge, welche Teile noch nicht geladen wurden und ob eine "Seite" geladen wurde, die nicht geladen wurde. Zeigen Sie dann ein "Bitte warten" -Zeichen an und blättern Sie diese Seite in der Prioritätswarteschlange nach oben.

Denken Sie daran, mit diesen Techniken vorsichtig zu sein, wenn Sie von Suchmaschinen indiziert werden möchten.

Answer 4

Die meisten Websites, die dies tun, funktionieren wie Google Maps. Sie teilen die Welt (oder in Ihrem Fall die virtuelle Seitwärts-Scroll-Seite) in Kacheln. Während der Benutzer scrollt, wird AJAX verwendet, um die nächste Kachel zu laden. Sie wird angezeigt, wenn der Benutzer die Kante der aktuell sichtbaren Kachel erreicht.

Sie können mehr als nur noch nicht sichtbare Kacheln auf jeder Seite laden, aber für eine bessere Benutzererfahrung benötigen Sie mehr clientseitigen Speicher.