jQuery Mobile：页面完全加载到 DOM 后如何进行页面转换

Question

单页应用程序，Query Mobile 1.4.5 & jQuery v1.11.1

这是否有可能在点击 Page 1 url 后，它应该等到 page 1 在加载后完全加载到 DOM 中，页面转换应该发生

因为我的页面 1 有一些 ajax 需要一些时间来加载

<div data-role="page" id="menu">
    Menu
    <a href="#page1" data-transition="slide">Page 1</a></br>
    <a href="#page2" data-transition="slide">Page 2</a></br>
</div>      
<div data-role="page" id="page1">
    ...some text.
    <div id="articles_list">
        some data from ajax...
    </div>
</div>

Answer 1

如果您绝对需要等到您的数据完全加载，那么您可以通过代码导航。只需使用按钮而不是锚点。

在下面的示例中，我链接了两个 ajax 请求来构建一个简单的专辑列表。检索成功后，对列表进行排序并重新设置页面内容的样式：

function gotoPage1() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    method: 'GET',
    crossDomain: true,
    dataType: "jsonp",
    beforeSend: function() {
      $.mobile.loading("show");
    }
  }).then(function(users) {
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/albums",
      method: 'GET',
      crossDomain: true,
      dataType: "jsonp",
      success: function(albums) {
        $("#articles_list").empty();
        $.each(albums, function(index, album) {
          album.userName = $.grep(users, function(user, index) {
            return (user.id == album.userId);
          })[0].name;
        });
        albums.sort(function(a, b) {
          return a.userName.localeCompare(b.userName);
        });
        $.each(albums, function(index, album) {
          $("#articles_list").append("<li>"+album.userName+"<p><strong>"+album.title+"</strong></p></li>");
        });
        $("#articles_list").listview({
          autodividers: true,
          inset: true
        }).listview("refresh");
      },
      complete: function() {
        $.mobile.loading("hide");
        $(":mobile-pagecontainer").pagecontainer("change", "#page1", {transition: "slide"});
      }
    });
  });
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="menu">
      <div data-role="header" data-position="fixed">
        <h3>Menu</h3>
      </div>
      <div data-role="content">
        <button class="ui-btn ui-corner-all" onclick="gotoPage1();">Page 1</button>
        <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all">Page 2</a>
      </div>
    </div>      
    <div data-role="page" id="page1">
      <div data-role="header" data-position="fixed">
        <a href="#" data-rel="back" class="ui-btn-left">Back</a>
        <h3>...some text.</h3>
      </div>
      <div data-role="content">
        <ul id="articles_list">
        </ul>
      </div>
    </div>
    <div data-role="page" id="page2">
      <div data-role="header" data-position="fixed">
        <a href="#" data-rel="back" class="ui-btn-left">Back</a>
        <h3>...some text.</h3>
      </div>
      <div>
        some other data from ajax...
      </div>
    </div>
  </body>
</html>