Question

我正在尝试使用jquery mobile 1.3 Android原生应用中的以下代码显示页面加载微调器，但它不起作用，任何人都可以帮助我解决问题是什么以及如何使其工作

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

Answer 1

其他答案都很好。我个人使用相同基本技术略有不同的变体 - 在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或类似的东西上这么慢，你需要有一个不错的超时，否则你将没有足够的时间让屏幕重绘。

Answer 2

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

Answer 3

尝试使用此代替$mobile.loading('show');：

var interval = setInterval(function () {
        $.mobile.loading('show');
        clearInterval(interval);
    }, 1);

如何在jquery mobile中显示页面加载微调器

3 个答案: