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

IPad Web App. Javascript, load all content in or switch page?

本文关键字：换页 App Web Javascript 加载 IPad      更新时间：2023-09-26

我们正在开发一个针对IPAD的web应用程序原型。我们很好地利用了HTML5，应用运行得很好。

部分要求是允许应用程序像本地应用程序一样以流体运动在"页面"之间切换。

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

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

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

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

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

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

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

  1. 遍历容器中的所有图像，
  2. 存储图像数量的计数(numImages)和初始化计数器(numLoaded)，计算加载的图像数量，和
  3. 绑定到每个图像的'load'事件，这样当它触发时，numLoaded计数器增加，而
  4. 检查numLoaded == numImages。如果为true，则所有图像都已加载，容器可以显示。
相关文章：