iPad 网络应用程序。 Javascript，加载所有内容或切换页面？

Question

我们正在开发针对 IPAD 的原型 Web 应用程序。我们充分利用了 HTML5，应用运行良好。

部分要求是允许应用像原生应用一样以流畅的动作在“页面”之间切换。

因此，我们的建议之一是改变网络应用的工作方式。目前，该应用程序的工作方式与普通网站非常相似，这在切换到带有大图像或动画的页面时会出现问题（因为它们是在页面切换时加载的）。

是否建议更改我们的应用程序，以便主页简单地拖动新内容（通过 AJAX）并相应地操作页面，从而创建所谓的单页应用程序。减少http请求的数量和大小？

如果是这种情况，并且我们希望通过 AJAX 加载内容，我们如何确定一旦我们将内容拖入，页面上的每个图像都已加载。这将允许我们在转换发生时使用一个简单的加载图标。

Answer 1

是否建议更改我们的应用程序，以便主页简单地拖动新内容（通过 AJAX）并相应地操作页面，从而创建所谓的单页应用程序。减少http请求的数量和大小？

在单页应用 (SPA) 中，请求的数量可能不会减少，但它们的大小可能会减少，因为您必须加载脚本并仅查看一次，然后只需更新相关部分页。 （当然，多页面设计也可以通过精心构建的缓存控制标头显着提高速度）。 SPA 范例的一个好处是您可以在初始应用程序加载期间加载多个页面，并在必要时显示它们。因此，您可以权衡初始加载中的一些延迟，以在后续页面更改时获得更快速的用户体验——即使是“AJAX 之旅”，也可以为自己节省一次服务器之旅。这是我通常喜欢在 SPA 中做出的权衡。

如果是这种情况，并且我们希望通过 AJAX 加载内容，我们如何确定一旦我们将内容拖入，页面上的每个图像都已加载。 如果图像足够小，另一种方法是使用 base-64 编码的图像，这将保证所有内容都准备好同时显示。

您可以将内容附加到容器中的 dom，但将其隐藏。在所有图像的“加载”事件触发后显示容器。如果你使用 jQuery，一个可以帮助你的插件是https://github.com/alexanderdickson/waitForImages。如果您使用的是纯 JS，您可能必须推出自己的解决方案，这将涉及：

1. 遍历容器中的所有图像，
2. 存储图像数量的计数 (numImages) 并初始化一个计数器 (numLoaded)，以记录已加载图像的数量，并
3. 绑定到每个图像的“加载”事件，这样当它触发时，numLoaded 计数器会递增，而
4. 检查是否numLoaded == numImages。如果为 true，则所有图像都已加载并且可以显示容器。