javascript - 使横向滚动网站快速加载的最佳方法是什么？

Question

我是堆栈溢出和编程的新手，所以请原谅我的任何尴尬措辞！

我正在构建一个图形丰富且大小为 680x9400 像素的横向滚动网站。我将使用一些 javascript 和/或 mootools 来创建一个很酷的横向滚动效果，类似于http://sursly.com。

我正在对所有使用的图像进行网络优化，但想知道是否有人对如何加快页面加载有任何其他想法？例如，有什么方法可以在水平部分中预加载网站？

提前致谢。

Answer 1

使用jQuery Lazy Loading Plugin之类的东西，您可以获得明显的加速，因为只会加载可见图像。所以他们不会与屏幕外的图像竞争。

我知道您可能会使用 mootools，但如果他们没有类似的东西，我会感到惊讶。

Answer 2

请注意，Sursly 网站上的大多数图形都是纯黑白的。这使得网站加载速度大大加快，因为可以优化文件。

Answer 3

我同意 Past One 的回答，但会稍微修改一下：不要根据需要加载它，而是尽可能加载它。也就是说，最初只加载第一页。一旦加载，然后加载第二个，然后是第三个，依此类推。

跟踪哪些部分已加载和尚未加载，如果请求尚未加载的“页面”，则显示“请稍候”标志并将该页面提升到优先级队列中。

如果您有兴趣被搜索引擎索引，请记住要小心使用这些技术。

Answer 4

大多数这样做的网站都像谷歌地图一样工作。他们将世界（或在您的情况下，虚拟横向滚动页面）划分为图块。当用户滚动时，AJAX 用于加载下一个图块，并在用户到达当前可见图块的边缘时显示。

如果需要，您可以在每一侧加载多个尚不可见的图块，但需要更多的客户端内存才能获得更好的用户体验。