Question

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

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

PS：最糟糕的情况，我只是在页面预渲染时将闪屏保持在所有内容的顶部，但我甚至无法做到这一点，因为JQM会进行转换并在我调用时更改页面$ .mobile.changePage（）。

Answer 1

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

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

您可以在this jsfiddle ..

上查看该示例

Answer 2

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

要控制哪些页面要预加载，哪些不是我引入了一个类'preload'，它放在我想要预加载的页面容器上。我在启动画面期间调用的这个_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 );
}

在后台预呈现JQM页面

2 个答案: