本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.5节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
当与之通信的服务器响应很慢，或者很有可能是在移动设备上连接速度很慢时，如果在一张包含了jQuery Mobile的页面中点击链接，通常会看到页面正在加载的信息。
这些提示信息除了用于链接点击外，还能用于其他的目的（比如，当你使用自己编写的JavaScript代码通过AJAX与服务器通信或者代码本身有巨大的计算量的时候）。代码清单9-6演示了如何显示页面正在加载的信息。
代码清单9-6 打开、关闭加载信息
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Loading Messages</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 $('#show').on('click', function() { 17 $.mobile.showPageLoadingMsg(); 18 }); 19 $('#hide').on('click', function() { 20 $.mobile.hidePageLoadingMsg(); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 27 <div data-role="page"> 28 29 <div data-role="header"> 30 <h1>Show/Hide Loading Message</h1> 31 </div> 32 33 <div data-role="content"> 34 <a href="#" id="show" data-role="button">Show Loading 35 Message</a> 36 <a href="#" id="hide" data-role="button">Hide Loading 37 Message</a> 38 </div> 39 40 </div> 41 42 </body> 43 </html>第34～37行提供了两个按钮，用来打开和关闭加载信息。这些按钮的功能依赖于自定义的JavaScript代码。尽管绝大多数jQuery Mobile代码不需要编写自定义的JavaScript，但还是有些例外。第17行和第20行用来显示和关闭加载信息。按下这些按钮，你会察觉到实际要完成的工作与加载信息之间实际上没有什么关系。
尽管在任何时间都可以打开和关闭加载信息，但还是在真正运行后台任务或加载页面资源时，才应该有所保留地使用它。
请注意$(document).ready(function() {})只执行一次：在初次加载HTML的时候。一旦使用AJAX加载新的页面，该事件将不会被再次触发。如果你想代码在每张页面上都会被执行，需要调用$(document).on('pageinit', function() {})。
相关资源：敏捷开发V1.0.pptx