单页应用程序,Query Mobile 1.4.5& jQuery v1.11.1
点击 Page 1 url之后是否可能会等到第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>
答案 0 :(得分:0)
如果您绝对需要等到数据完全加载,那么您可以按代码导航。只需使用按钮而不是锚。
在下面的例子中,我正在链接两个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>