在后台预渲染JQM页面

我有一个使用jQuery Mobile构建的移动Web应用程序。它使用的是多页面模板，其中大部分内容是使用javascript动态创建的。应用程序首次加载时会显示启动画面，然后将用户发送到“索引”页面。从那里用户可以通过＃链接导航到应用程序的不同部分。每个页面的内容都是用javascript动态创建的，然后在“pageshow”事件中插入到DOM中。在后台预渲染JQM页面

这工作得很好，有一个小问题，我一直无法解决。第一次加载页面需要几秒钟的时间才能生成内容并将其插入到DOM中。随后的加载没问题，因为之前渲染的内容已经在DOM中，并且只有在有新数据时才会被替换。我想要做的是预先渲染每个页面的DOM，以便在第一次加载页面时不会出现明显的延迟。我可以通过在每个页面上调用$ .mobile.changePage（）来实现此目的。问题是我希望在后台完成这些工作，而不会向用户显示页面或任何页面转换。有没有办法做到这一点？

PS：最糟糕的情况是，我只是在启动画面时将页面预先渲染，但是我甚至无法做到这一点，因为JQM会进行转换并在每次我更改页面时调用$ .mobile.changePage（）。

来源

2011-12-20 beon

所有你需要做的就是使用$.mobile.loadPage。在下面的示例中，我将展示如何在显示#one时通过散列URL初始化单个页面。你可以列出所有这些，如果你想要或创建一个奇特的脚本来找到没有ui-page类的所有[data-role]元素，获取它的ID，并以我在这里调用加载的方式。

$("#one").live("pageshow",function(){ 
     $.mobile.loadPage("#two"); 
    });

你可以看到的例子在行动上this jsfiddle ..

来源

2011-12-20 02:34:15 sgliser

也许这不是在这个问题清楚了。我在'pageshow'上动态创建每个页面的内容。因为这个原因，我不能调用loadPage（'＃2'），因为它不会触发'pageshow'。也许我错过了一些东西，并且在使用'loadPage（）'时可以绑定另一个事件。但即使是这种情况，[docs]（http://jquerymobile.com/test/docs/api/methods.html）也会说'loadPage（）加载**外部**页面的内容。不知道jsFiddle如何演示解决方案，因为#two已经拥有所有jqm标记，并且不需要增强或插入到DOM中。 – beon 2011-12-20 02:59:27

无论如何，谢谢。我会随着我的应用程序一起去，并会让你知道它是如何发生的。 – beon 2011-12-20 03:02:18

我知道它说你只能在外部页面上使用它，但是当我在jsfiddle上玩它时，我能够看到它将ui-page类应用到id为“two”的div上，。尚未初始化的页面将不具有该类。因此，尽管他们可能在文档中陈述了什么，但是URL解析器知道在这种情况下要做什么。 – sgliser 2011-12-20 04:07:37

我偶然发现了你的问题，因为我一直在寻找到有些同样的问题。我最终得到的是我的项目中的一个_preloadPages（）函数，它基本上实例化了通常在内部完成的页面小部件。由于没有记录，请记住，升级JQM时随时可能会中断。

为了控制预加载和不是我介绍了一个类的预加载“这是我放在页面容器我要预加载的页面。我在启动屏幕时调用了_preloadPages（）函数，并且不会将应用程序的初始化强调为预加载的时间间隔为300毫秒。尽管如此，仍然在玩这些数字。

function _preloadPages() 
{ 
    // Execute the page() widget call on all pages that haven't yet been initialized, we do this 
    // to prevent a slight delay when initially loading a page 
    // 
    var $pages  = $("[data-role='page'].preload:not(.ui-page)") 
    , index  = 0 
    , pageCount = $pages.length 
    ; 

    var preloadTimer = setInterval(function() 
    { 
     var page = $pages[ index ] 
     , $page = $(page) 
     ; 

     $page.page(); 

     index++; 

     if (index === pageCount) 
     { 
      clearTimeout(preloadTimer); 
     } 
    }, 300); 
}

来源

2012-07-09 12:22:56 arnedebree

在后台预渲染JQM页面

回答

相关问题