jQuery Mobile:在页面完全加载到DOM后如何执行页面转换 [英] jQuery Mobile: how to do page transition after page is fully loaded into DOM
问题描述
单页应用程序，查询Mobile 1.4.5& jQuery v1.11.1
Single-Page Applications, Query Mobile 1.4.5 & jQuery v1.11.1
是否有可能在点击第1页网址后，它应该等到第1页在加载后完全加载到DOM中后，才应该发生页面转换
Is this possible that after click on Page 1 url it should wait till page 1 to load full into DOM after it load, page transition should happened
因为我的第1页有一些ajax，需要一些时间来加载
because my page 1 have some ajax which request some time to load
<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>
推荐答案
如果您绝对需要等到数据完全加载后，就可以通过代码进行导航.只需使用按钮代替锚即可.
If you absolutely need to wait until your data is fully loaded, then you can navigate by code. Just use a button instead of an anchor.
在下面的示例中，我链接了两个ajax请求以构建一个简单的专辑列表.成功检索后，将对列表进行排序并重新设置页面内容的样式:
In the example below, i'm chaining two ajax requests to build a simple list of albums. After successfully retrieval, the list is sorted and the page content is restyled:
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>
这篇关于jQuery Mobile:在页面完全加载到DOM后如何执行页面转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
