Question

我试图在我的移动网络应用程序中来回浏览时尽量避免重新加载。 JQuery Mobile似乎是为此设计的，但是我在解决这种行为方面遇到了麻烦。

基本上，我有两个页面（page1和page2）。 page1有page2的链接，反之亦然。第一次加载它们时，两个页面（i）都在ajax中加载数据，以及（ii）相应地改变DOM结构。我使用全局var来避免重新加载数据，这非常有用。

假设page1（resp page2）在html和dom10中有一个名为dom20（resp dom11）的DOM结构（resp {{1一切都被加载后。

这是我的问题：

我加载dom21，数据已加载，DOM已从page1更改为dom10
然后我点击dom11，加载<a href="page2">click</a>，检索数据并将DOM从page2更改为dom20。到目前为止一切顺利。
然后我点击dom21返回。该页面就像我留下<a href="page1">click</a>一样。很棒，根本没有dom11电话。
我终于再次点击GET，这就是伤害的地方。页面再次加载（<a href="page2">click</a>调用），未检索到数据，但dom已设置回GET

我可以继续点击返回，我总是得到相同的行为。每当我点击dom20时，就像我离开时一样获取DOM，每当我点击page1时，都会有一个page2调用并重新加载DOM。

所以这是我的问题，有没有办法阻止重新加载已经在jQuery Mobile中加载的页面？

我可以考虑使用解决方法来获取我想要的DOM，但我希望避免不必要的调用减慢我的应用程序。

如果您想玩它，可以试试there。

非常感谢你的帮助！

PS：令人惊讶的是，我在Firefox和Chrome上的行为并不相同......恐怕不是那么简单。

Answer 1

默认情况下，即使您之前已经访问过页面，jQM也始终会对页面发出AJAX请求。如果设置$.mobile.page.prototype.options.domCache = true;，那么jQM只会重新加载页面。

如果需要刷新页面，则在调用$ .mobile.changePage时需要将reloadPage设置为true - 否则页面将过时。

但是，如果你这样做，你的所有页面都将被附加到DOM，从而产生影响性能的大量DOM - 你需要在JS中正确地管理它，这是一个不同的主题。但是想象一下，当你的DOM中有20个页面时，可以进行开放式的$（'。myClass'）搜索。在我写的较旧的答案中，我有更多详细信息：Jquerymobile - $.mobile.changepage

Answer 2

您正在使用“单页面布局”，它通过ajax加载每个页面：

http://jquerymobile.com/demos/1.0.1/docs/pages/page-template.html

此处的每个链接或表单都会通过Ajax将新页面拉到支持动画页面过渡

我会看一下多页面布局

http://jquerymobile.com/demos/1.0.1/docs/pages/page-anatomy.html

搜索“多页模板结构”部分。

所以你的例子是：

<!DOCTYPE html> 
<html> 
 <head>
  <title>test</title>
  <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <script src="jquery/jquery-ui-1.8.18.custom.min.js"></script>
    <script>var doNotLoadPage1Again = false; var doNotLoadPage2Again = false;</script>
 </head> 
 <body>
  <div data-role="page" id="page1">
   <p id="info">loading...</p>
   <a href="#page2">page2</a>
   <script>
    if(!doNotLoadPage1Again) {
      // do some heavy loading stuff
      $("#page1 #info").html("loading done");
      doNotLoadPage1Again = true;
    }
    </script>
  </div>
<!-- Page 2-- >
  <div data-role="page" id="page2">
   <p id="info">loading...</p>
   <a href="#page1">page1</a>
   <script>
    if(!doNotLoadPage2Again) {
      // do some heavy loading stuff
      $("#page2 #info").html("loading done");
      doNotLoadPage2Again = true;
    }
    </script>
  </div>
 </body> 
</html>

什么时候jQuery Mobile在来回浏览时重新加载页面？

2 个答案: