jQuery Mobile加载消息或动画

Question

我正在尝试实现jQuery移动加载状态/消息，以便当程序忙于在sqlite数据库中搜索文本时，用户可以获得进度但不能。我已将加载代码放在下面。但我无法获得任何加载动画。它做错了什么？请帮帮我

$(document).on( "pagebeforeshow", "#results", function( e ) {

       $.mobile.loading( 'show', {
            text: 'Fetching results....',
            textVisible: true,
            theme: 'd',
            html: ""
       });

       var output = '';
       var found = 0;

       if(formData.range == "ot"){

            db.transaction(function (tx) {

               tx.executeSql("SELECT COUNT(*) as freg FROM books WHERE testament='OT' and scripture LIKE ('%"+formData.search+"%')", [], function (tx, results) {
                     var len = results.rows.length;

                     if (len > 0) {
                         for (var i = 0; i < len; i++) {
                             found = results.rows.item(i)['freg'];
                         }

                         $('div#results h1').html(found+" verses found");
                     }
               });

               tx.executeSql("SELECT * FROM books WHERE testament='OT' and scripture LIKE ('%"+formData.search+"%')  ORDER BY id", [], function (tx, results) {
                   var len = results.rows.length;

                   if (len > 0) {
                       for (var i = 0; i < len; i++) {

                            output += '<p style="font-size:1.5em;"><span style="font-weight:bold;color:red; font-size:.83em;">'+results.rows.item(i)['book']+' '+results.rows.item(i)['chapter']+':'+results.rows.item(i)['verse']+'</span> <br/>'+results.rows.item(i)['scripture']+ '<hr/></p>';
                       }

                       $('#search-results').html(output);

                   }
               });

           });

          $.mobile.loading('hide');
       }
 });

这就是我在阅读sqlite数据库时调用必须显示加载动画的页面的方法

$(':mobile-pagecontainer').pagecontainer('change', '#results', {
   reload: true
});