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

Question

我们正在开发一个原型(prototype)网络应用程序，以 IPAD 为目标。我们充分利用了 HTML5，该应用程序运行良好。

部分要求是允许应用像 native 应用一样以流畅的方式在“页面”之间切换。

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

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

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

Answer 1

Is it recommended to change our app so what the home page simply drags the new content (via AJAX) and manipulates the page accordingly, thus creating a so called single page app. Reducing the number and size of the http requests?

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

If this is the case and we wish to load the content via AJAX, how can we be sure that once we have dragged the content in, each of the images on the page have loaded. If the images are small enough, an alternative is to use base-64 encoded images, this'll guarantee that all content is ready to be displayed at the same time.

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

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