本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.5节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
9.5 技巧：显示页面正在加载的信息
当与之通信的服务器响应很慢，或者很有可能是在移动设备上连接速度很慢时，如果在一张包含了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() {})。
