Предварительный рендеринг страниц JQM в фоновом режиме - PullRequest
Новая
       7

Предварительный рендеринг страниц JQM в фоновом режиме

0 голосов
/ 20 декабря 2011

У меня есть мобильное веб-приложение, созданное с помощью jQuery Mobile. Он использует многостраничный шаблон, при этом большая часть контента создается динамически с использованием JavaScript. Когда приложение загружается в первый раз, оно показывает заставку, а затем отправляет пользователя на «индексную» страницу. Оттуда пользователь может переходить к различным частям приложения через # ссылки. Содержимое каждой страницы создается динамически с помощью javascript, а затем вставляется в DOM при событии «pageshow».

Это очень хорошо работает с одной маленькой проблемой, которую мне не удалось решить. При первой загрузке страницы для создания и вставки содержимого в DOM требуется несколько секунд. Последующие загрузки в порядке, поскольку ранее визуализированный контент уже находится в DOM и заменяется только при наличии новых данных. Что я хочу сделать, это предварительно отрендерить DOM каждой страницы, чтобы не было заметной задержки при первой загрузке страницы. Я могу добиться этого, вызывая $ .mobile.changePage () на каждой странице. Проблема в том, что я хочу, чтобы это делалось в фоновом режиме без показа страниц или каких-либо переходов страниц пользователю. Есть ли способ сделать это?

PS: В худшем случае я бы просто держал заставку поверх всего, пока страницы предварительно визуализируются, но я даже не могу этого сделать, поскольку JQM выполняет переход и изменяет страницу всякий раз, когда я вызываю $ .mobile.changePage ().

Ответы [ 2 ]

2 голосов
/ 20 декабря 2011

Все, что вам нужно сделать, это использовать $.mobile.loadPage.В приведенном ниже примере я показываю, как инициализировать одну страницу по URL-адресу хеша при отображении #one.Вы можете перечислить их все, если хотите, или создать необычный скрипт, чтобы найти все элементы [data-role], которые не имеют класса ui-page, получить его идентификатор и вызвать загрузку так же, как здесь,

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

Вы можете увидеть пример в действии на this jsfiddle ..

1 голос
/ 09 июля 2012

Я наткнулся на ваш вопрос, так как я изучал несколько ту же проблему.Я закончил с функцией _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 );
}
...