mobile.loading需要很長時間才能顯示

我們正在構建一個應用程序，通過ajax POST和GET進行一些外部調用，並在這些調用期間嘗試顯示mobile.loading。我們稱之爲從一個網頁到另一個裝載機，裏面的「pagebeforecreate」都出現了OK，如下所示：mobile.loading需要很長時間才能顯示

$(document).on('pagebeforecreate', "#menu-principal", function(){  
setTimeout(function(){ 
    $.mobile.loading('show', 
     { 
      text: "Loading...", 
      textVisible: true, 
      theme: "b", 
      textonly: true 
     } 
    ); 
},1);

}）;

無論何時我們需要在點擊按鈕後顯示加載程序，加載程序需要很長時間才能顯示，並且失去了顯示它的所有感覺，因此用戶知道他必須等待。

該按鈕點擊調用一個JS函數，使得一個POST，並根據POST的結果，它可能會轉換到另一個頁面或顯示警報。當需要顯示警報時，加載程序僅在與警報同時出現，當用戶單擊該按鈕並在警報之前立即隱藏時它應該出現。

HTML與按鈕

<div class="ui-field-contain"> 
    <span class="label">Matrícula com o dígito ou o CPF/CNPJ:</span> 
    <input type="number" id="login_matricula" data-clear-btn="true"> 
</div> 
<div class="ui-field-contain"> 
    <span class="label">Senha <small><a href="javascript:transitionPage('duvidas_senha.html', 'slideup', false, true)">Dúvidas sobre sua senha?</a></small></span> 
    <input type="tel" id="login_senha" name="login_senha" style=" -webkit-text-security: disc;" data-clear-btn="true"> 
</div> 
<div class="ui-field-contain"> 
    <a href="javascript:getLoginResult();"><button id="btn_envia_login" class="botao">Enviar</button></a> 
</div> 

<div class="banner"> 
    <div class="slider" id="sliderHome" role="toolbar"></div> 
</div>

與功能getLoginResult JS（）

function getLoginResult(){ 
    setTimeout(function(){ 
     $.mobile.loading('show', 
      { 
       text: "Loading...", 
       textVisible: true, 
       theme: "b", 
       textonly: true 
      } 
     ); 
    },0); 

    var url = "/mobile/service/logon"; 
    var matricula = $('#login_matricula').val(); 
    var senha = $('#login_senha').val(); 

    var data = { 
     'username':matricula, 
     'password':senha 
    }; 

    var retorno = sendPostRequest(url, data); 

    if(retorno['responseJSON']['status'] === true){ 
     var dadosAssociado = getDadosAssociado(); 
     localStorage.setItem("dadosAssociado", JSON.stringify(dadosAssociado)); 

     if(retorno['responseJSON']['aviso'] != null){ 
      // removes loading 
      setTimeout(function(){   $.mobile.loading('hide');  },100); 

      alert("Shows alert"); 
     }else{ 

     } 
    }else{ 
     // removes loading 
     setTimeout(function(){   $.mobile.loading('hide');  },100); 
     alert("Fail to login"); 
    } 
}

編輯它可以在瀏覽器中，但它不工作設備。

來源

2016-04-07 Alexandre Lins

更改此：

<a href="javascript:getLoginResult();"><button id="btn_envia_login" class="botao">Enviar</button></a>

這樣：

<button id="btn_envia_login" class="botao">Enviar</button>

而JavaScript代碼綁定到該按鈕單擊事件：

$(document).on("click", "#btn_envia_login", function(){ 

    setTimeout(function(){ 
     $.mobile.loading('show', 
      { 
       text: "Loading...", 
       textVisible: true, 
       theme: "b", 
       textonly: true 
      } 
     ); 
    },1); 

    //etc

小提琴：https://jsfiddle.net/1vmjc4bm/

編輯：

更妙的是，把你的HTML代碼的形式裏面，你的JavaScript代碼綁定到表單提交的事件，就像這樣：

HTML：

<form data-ajax="false" id="btn_envia_login"> 
    <!-- form content goes here --> 
</form>

jQuery：

//Submit form 
$(document).on("submit", "#btn_envia_login", function(e){ 
    //Prevent default action 
    e.preventDefault(); 

    //Display loader 
    setTimeout(function(){ 
     $.mobile.loading('show', 
      { 
       text: "Loading...", 
       textVisible: true, 
       theme: "b", 
       textonly: true 
      } 
     ); 
    },1); 

    //further handling 
    //... 
    //... 
    //... 

    //End with return false; 
    return false; 
});

更新提琴：https://jsfiddle.net/1vmjc4bm/1/

來源

2016-04-12 11:35:21

mobile.loading需要很長時間才能顯示

回答

相關問題