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

Question

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

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

我正在优化所有使用的图片，但是想知道是否有人对如何加快页面加载有任何其他想法？有没有办法在水平部分预加载网站？

提前致谢。

Answer 1

使用类似jQuery Lazy Loading Plugin的内容，您可以获得感知的加速，因为只会加载可见图像。所以他们不会与屏幕外图像竞争。

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

Answer 2

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

Answer 3

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

跟踪哪些部分尚未加载但尚未加载，如果请求未加载的“页面”，则显示“请稍候”标志并将该页面向上突出显示优先级队列。

如果您对搜索引擎编入索引感兴趣，请记住要小心这些技巧。

Answer 4

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

如果需要，您可以在每一侧加载多个尚未显示的磁贴，但为了获得更好的用户体验，需要更多的客户端内存。