Jquery Mobile: загрузить страницу DIV перед переходом

Question

Привет!!

У меня есть вопрос, и я нигде не нашел решения для него...

Итак, у меня есть кнопка, которая ссылается на внутреннюю страницу div (#page2) с очень длинным списком, мне нужно, чтобы внутренняя страница div была "загружена" до начала перехода...

Вот очень простой пример кода:

<!-- Page #1 -->
<!-- ... -->
        <div data-role="content">    
        <p>View internal page: <a href="#page2">goto Page 2</a></p>
         </div>
<!-- ... -->
    <!-- Start of Page #2 -->
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->
        <div data-role="content">   
    <ul><li>...</li>
    <li>...</li>
    <!-- About 300+ of: <li>...</li> -->
    </ul>
    </div>

Таким образом, щелкнув ссылку на # page2, вы получите jquery mobile "Загрузка...", и после того, как он "загрузит" контент, переход должен начаться.. Причина, по которой я делаю это на той же странице, что я вставляю на страницу #2 динамически делит всех друзей в Facebook (длинный список), и от клика до начала перехода уходит много времени...

Вот хороший пример того, что мне нужно: http://www.mpdtunes.com/ Просто перейдите по ссылке: Live Demo-> Login -> Click Artists...

Любые предложения приветствуются!

Большое спасибо!!!!

Answer 1

В основном вы хотите сделать это:

1. Используйте кнопку, как это:

   <a href="#" id="to-page2">goto Page 2</a>
   

2. Добавьте событие клика к нему:

   $(document).on('pagebeforeshow', '#index', function(){ 
       $(document).on('click', '#to-page2', function(){ 
           // Load internal page content
       });       
   });
   

   куда #index является идентификатором вашей кнопки, содержащей страницу.

3. Показать анимацию загрузки aka ajax loader

   setTimeout(function(){
       $.mobile.loading('show');
   },1);
   

   SetTimeout необходим, потому что браузеры веб-комплекта имеют проблемы с динамически запускаемым загрузчиком ajax.

4. Загрузите содержимое вашей внутренней страницы. Теперь, если вы используете 1 HTML-страницу с несколькими страницами, вы можете сразу добавить новый контент в просмотр списка. Это потому, что listview уже загружен в DOM. Если вы используете несколько HTML-страниц, сохраните содержимое страницы в переменной localstorage.

5. Скройте загрузчик ajax, снова с помощью setTimeout.

6. Переход с начальной страницы на:

   $.mobile.changePage("#page2");
   

7. Если у вас есть 1 страница HTML, то это она. Если вы сохранили содержимое своей страницы в локальном хранилище, вам нужно будет загрузить его во время события pagebeforeshow второй страницы, например:

   $(document).on('pagebeforeshow', '#page2', function(){ 
       // Load internal page content from local-storage and append it
   });
   

8. Последний шаг - инициализация содержимого страницы просмотра списка. Для этого взгляните на мой другой ответ, просто найдите тему, касающуюся списка.