html - 处理大页面加载

Question

我有一个基本上是一个大页面的网站，它是一本翻书（由 jQuery Booklet 插件提供支持），有 50 页，每页都有艺术品。此页面的大小在 6 - 7mb 之间。这有点大，慢速连接可能需要一段时间才能加载页面。我正在考虑将这本书分成多个类别（因此有多个较小的页面），但同时我有这两个问题：

• 处理包含大量内容的页面加载的最佳方法是什么？

• 大型网站如何处理这些问题？

注意：我不能为页面上的图像使用精灵。

Answer 1

尝试使用图像优化器压缩图像文件，例如 Kraken： http: //kraken.io/

Answer 2

您可以尝试延迟加载图像 (http://www.appelsiini.net/projects/lazyload) - 图像在页面上可见之前不会被请求。

另一种选择是使用change小册子脚本中的事件来使用 AJAX 加载该页面的内容。这样，最初不需要下载所有内容，但是在客户端更改页面时会出现一些延迟。

$(".selector").booklet({
    change: function(event, data) { ... }
});

大多数具有“无限”滚动功能的大型网站（例如 Facebook）使用 AJAX 仅在需要时加载更多内容。