本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.19节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.19 技巧：利用JavaScript调用加载页面
当变更至不同的页面时，在移动端的浏览器切换到新页面之前，首先会把页面加载到DOM里面。在链接上使用data-prefetch属性会使jQuery Mobile在用户点击链接前预加载页面。
在HTML中甚至不用链接也能完成类似的功能。代码清单9-23演示了如何使用JavaScript代码来提前获取数据。
代码清单9-23 通过JavaScript代码来加载页面
00 <!DOCTYPE html>
01 <html>
02 <head>
03 <title>Load Page</title>
04 <meta name="viewport"
05 content="width=device-width, initial-scale=1">
06 <link rel="stylesheet" href=
07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
08 <script type="text/javascript"
09 src="http://code.jquery.com/jquery-1.7.1.min.js">
10 </script>
11 <script type="text/javascript" src=
12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
13 </script>
14 <script>
15 $(document).ready(function() {
16
17 $('#change').on('click', function(event) {
18 $.mobile.loadPage('43b-change-page.html',
19 {transition: 'fade'})
20 .done(function() {
21 alert('Done loading!');
22 });
23 });
24
25 });
26 </script>
27 </head>
28 <body>
29
30 <div data-role="page">
31
32 <div data-role="header">
33 <h1>Load page</h1>
34 </div>
35
36 <div data-role="content">
37 <a href="#" id="change" data-role="button">Change Page</a>
38 </div>
39
40 </body>
41 </html>
为了能看到这种加载动作的结果，需要一种工具才行，比如Firefox中的Firebug或者别的浏览器中类似的开发者工具。点击按钮后，会触发这段代码，然后一张新的页面会出现在DOM树中。
第20～22行演示了loadPage函数是如何同promise1一起工作的。loadPage()方法设置了要加载的页面，然后使用transition选项设置页面视图以“淡入”的特效显现。
