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. 绑定到每个图像的“负载”事件，使得当其触发时，numLoaded计数器被递增，而
4. 检查是否numLoaded == numImages。如果为true，则所有图像都已加载并且可以显示容器。