本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.19节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
当变更至不同的页面时，在移动端的浏览器切换到新页面之前，首先会把页面加载到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选项设置页面视图以“淡入”的特效显现。
相关资源：chatapp9.19.20-源码