Question

我疯狂地试图让一个微调器出现。因此，我将重处理函数绑定到按钮上：

$(document).delegate("#clearread", "tap", onClearRead);

所以点击它就是这个：

var onClearRead = function() {

setTimeout($.mobile.showPageLoadingMsg, 5);  

// Civilised cleaning of saved status
var jStorIndex = $.jStorage.index();
for (var i = 0; i < jStorIndex.length; i++) {
    if( jStorIndex[i] != "version" ) {
        $.jStorage.deleteKey(jStorIndex[i]);
    }
}   

// Load articles afresh
loadArticles();

$.mobile.changePage("#choosearticle");

} //onClearRead

我发现在清除/加载文章（大约10秒）期间，微调器不会出现，但只在#choosearticle页面加载（0.5秒）的短暂时间内出现。 我做错了什么？

我让微调器在应用程序的其他地方工作。

由于

Answer 1

试试这个：

$(document).delegate("#clearread", "tap", onClearRead);

var onClearRead = function() {
$.mobile.showPageLoadingMsg();
setTimeout(function(){  
        //Your heavy processing
        $.mobile.changePage("#choosearticle");
    }, 5);
} //onClearRead

Answer 2

jQuery.show( [duration ] [, complete ] )

将繁重的处理工作放在＆＃34;完成＆＃34;功能槽，确保在节目发生之前可以看到对象（在其上显示调用）。

相关SO答案

https://stackoverflow.com/a/25207120/999943

jQuery whole HTML page load with spinner

使用基于CSS的微调器的示例

CSS

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(359deg); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(359deg); } }

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg); }

  100% {
    -o-transform: rotate(359deg); } }

@-ms-keyframes spin {
  0% {
    -ms-transform: rotate(0deg); }

  100% {
    -ms-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(359deg); } }

.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear; }

使用字体真棒的Html

<div id="spinner" data-bind="visible: isSpinning" style="padding: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #cccccc; z-index: 1; filter: alpha(opacity=30);">

    <i class="fa fa-spinner fa-spin fa-5x"></i>
</div>

的Javascript

$('#spinner').show(100, function() {
  // Once the spinner is visible then run the heavy function.
  heavyProcessingFunction();
});

在jQuery Mobile 1.1中重度处理之前显示加载微调器？

2 个答案: