Jquery Mobile 预缓存页面

Question

在我的 jQuery Mobile 中，我有 2 个页面，index.html 和 test.html。索引页面中有一个<p>标签，它有一个类，所以当我的javascript点击<p>标签时，它想加载test.html。

但是使用 jQuery Mobile 时，索引页面加载测试页面时，它不在 DOM 中。因此，为了进入测试页面并替换 test.html 中 div 的内容，必须首先将其加载到 DOM 中。所以这就是我正在做的事情：

当点击 try2 时，我执行加载页面以将其放入 DOM，然后将 div 替换为新的 html，然后切换到页面。 div 的 html 永远不会改变。

$('.try2')
  .click(function(){
    $.mobile.loadPage( 'test.html', { showLoadMsg: false } );
    $('#mytest').html('i am here now').fadeIn('slow');
    $.mobile.changePage( "test.html", { transition: "slideup"} );
  });

Answer 1

在指向第二个页面的链接上使用 data-prefetch 属性预取页面。文档：http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html

然后绑定到 pageinit 或 pageshow 事件以在第二个页面转换到视图之前更新 div。

您当前的代码将无法工作，因为您的事件处理程序中的前两行是异步的，因此要使用它们，您必须将回调函数用于异步函数。

更新

如果您想预先缓存页面但没有指向该页面的直接链接，您始终可以创建一个虚拟链接并将其隐藏：

<a data-precache href="page2.html" style="display:none;"></a>