mobile.加载时间过长，无法显示

mobile.loading takes too long to show

本文关键字：显示 加载 时间 mobile      更新时间：2024-02-20

我们正在构建一个应用程序，该应用程序通过ajax POST和GET进行一些外部调用，在这些调用过程中，我们试图显示mobile.loading。我们从一个页面调用到另一个页面的加载程序，在"pagebeforecreate"内显示OK，如下所示：

$(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");
    }
}

编辑它在浏览器中工作，但在设备上不工作。

更改此项：

<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

Fiddle：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/

相关文章：