IPad Web App。 Javascript，加载所有内容或切换页面？

Question

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

部分要求是允许应用程序在流畅动作中的“页面”之间切换，就像本机应用程序一样。

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

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

如果是这种情况并且我们希望通过AJAX加载内容，我们怎样才能确定一旦我们拖动了内容，页面上的每个图像都已加载。这将允许我们在转换过程中使用简单的加载图标。

Answer 1

  

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

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

  

如果是这种情况并且我们希望通过AJAX加载内容，我们怎样才能确定一旦我们拖动了内容，页面上的每个图像都已加载。   如果图像足够小，则可以使用base-64编码图像，这样可以保证所有内容都可以同时显示。

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

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