0

I am trying to show page loading spinner using below code in jquery mobile 1.3 Android native app, but it is not working, can any one help me what the issue is and how to make it work

</head>
  <body>
    <div id="createPage" data-role="page">
   <script>
    $("#createPage").on("pageshow", function(event, ui) {
    $mobile.loading('show');
    processCreateBtnAction(); //This takes 5 seconds to complete the operation
    $.mobile.loading('hide');
});
</script>
 <div data-role="header" data-position="fixed"></div>
4

3 回答 3

5

其他答案都很好。我个人使用相同基本技术的稍微不同的变体 - 在 Javascript 处理中创建足够大的中断，以便 UI 有足够的时间重绘自身。

$("#createPage").on("pageshow", function(event, ui) {
    $.mobile.loading('show');
    setTimeout(function(){
        processCreateBtnAction(); //This takes 5 seconds to complete the operation
        $.mobile.loading('hide');
    }, 20);
});

这将在调用“show”后创建 20 毫秒的超时。在调用 CPU 繁重的 processCreateBtnAction() 函数之前，这足以让 UI 重新绘制自身。

我尝试了不同的时间，发现 20 毫秒是最好的超时时间。有些人尝试使用 0 或类似的东西 - 这将适用于更快的设备。但是在 iPad 1 或类似速度较慢的设备上，您需要有一个适当的超时时间，否则您将没有足够的时间来重绘屏幕。

于 2013-07-08T21:04:31.447 回答
0

试试这个代替 $mobile.loading('show');：

var interval = setInterval(function () {
        $.mobile.loading('show');
        clearInterval(interval);
    }, 1);
于 2013-07-08T19:15:29.910 回答
0

Javascript 与其他编程语言略有不同，因为它不会等待函数processCreateBtnAction()中的操作完成后才移动到下一行——这就是你的微调器被隐藏的原因。

解决这个问题的一种方法是使用回调函数（如在 Javascript 中，函数可以作为对象传递）。类似于以下内容：

$("#createPage").on("pageshow", function(event, ui) {
    $mobile.loading('show');
    processCreateBtnAction($.mobile.loading('hide'));
});

function processCreateBtnAction(callback) {
    // Rest of your function here

    callback(); // $.mobile.loading('hide') will be called here.
}
于 2013-07-08T12:37:10.923 回答