0

I am using Phonegap / Cordova and am currently working in Android.

I have several pages that create many DOM objects and it takes time for the page to load. I am trying to create a "Loading..." screen so the user isn't looking at a black screen for some time.

I thought maybe CSS would be the best for this but I am not able to get it to show up at all.

Here is the script I am trying to use

http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation

So I have my gif animation and I placed this code at the bottom of the html page

<div class="modal"><!-- Place at bottom of page --></div>

I then placed this code in my css file

.modal {
display:    none;
position:   fixed;
z-index:    1000;
top:        0;
left:       0;
height:     100%;
width:      100%;
background: rgba( 255, 255, 255, .8 ) 
            url('../img/loader.gif') 
            50% 50% 
            no-repeat;
}

/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading {
overflow: hidden;   
}

/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}

I then placed this code at the start of my application .js file

$("body").on({
ajaxStart: function() { 
    $(this).addClass("loading"); 
},
ajaxStop: function() { 
    $(this).removeClass("loading"); 
}    
});

When I test the code I do not get the css layer or the gif animation, just the usual black screen as my DOM objects are being populated.

Is this type of loading screen usable within Phonegap?

Any help would be much appreciated.

Thanks.

* Also I just noticed that when I go to the jsfiddle test page from that example link, the JQuery library is set to 1.7.2, I am using the newest, 2.0.3. When I change the library in jsfiddle then the example no longer works. I am assuming some part of the code is depreciated?

4

1 回答 1

0

用户 jcesarmobile 在另一个论坛上为我解决了问题

"

来自 jquery 网站

AJAX 事件应附加到文档

从 jQuery 1.9 开始，全局 AJAX 事件（ajaxStart、ajaxStop、ajaxSend、ajaxComplete、ajaxError 和 ajaxSuccess）仅在文档元素上触发。更改程序以侦听文档上的 AJAX 事件。例如，如果代码当前如下所示：

$("#status").ajaxStart(function(){ $(this).text("Ajax 开始"); }); 将其更改为：

$(document).ajaxStart(function(){ $("#status").text("Ajax 开始"); });

"

于 2013-08-25T23:51:14.960 回答