Question

我正在使用Phonegap / Cordova，目前我在Android工作。

我有几个页面可以创建许多DOM对象，并且页面加载需要一些时间。我正在尝试创建一个“正在加载...”屏幕，因此用户一段时间内不会看黑屏。

我想也许CSS会是最好的，但我根本无法让它显示出来。

这是我尝试使用的脚本

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

所以我有我的gif动画，我把这段代码放在html页面的底部

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

然后我将此代码放在我的css文件中

.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;
}

然后我将此代码放在我的应用程序.js文件的开头

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

当我测试代码时，我没有得到css图层或gif动画，只是填充了我的DOM对象时常用的黑屏。

这种类型的加载屏幕是否可在Phonegap中使用？

非常感谢任何帮助。

感谢。

* 我还注意到，当我从该示例链接转到jsfiddle测试页面时，JQuery库设置为1.7.2，我使用的是最新的2.0.3。当我在jsfiddle中更改库时，该示例不再有效。我假设代码的某些部分是折旧的？

Answer 1

用户jcesarmobile

在我的另一个论坛上解决了问题

“

来自jquery网站

AJAX事件应附加到文档

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

$（“＃status”）。ajaxStart（function（）{$（this）.text（“Ajax started”）;}）; 将其更改为：

$（document）.ajaxStart（function（）{$（“＃status”）。text（“Ajax started”）;}）;

“

Phonegap - 创建CSS加载屏幕

1 个答案: