在jQuery Mobile中显示页面加载Spinner on Ajax Call

Question

我正在使用$ .ajax()填充我的移动网络应用中的列表.我想要做的是在执行此调用时出现jQuery移动加载微调器,并在列表填充后消失.当前版本的JQM分别使用$.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg()显示和隐藏加载微调器.我无法确定将这些语句放在何处以获得正确的结果.这似乎应该是一件相当容易实现的事情,我只是无法找到关于这个确切场景的任何信息.

这是pagecreate函数中的ajax调用:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                for(i = 0; i < data.length; i++) {
                    $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>');
                    $('#course' + data[i].id).listview();
                    for(j = 0; j < data[i].evaluatedUserIds.length; j++) {
                        $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>');
                    }
                    $('#course' + data[i].id).listview('refresh');
                }
                $('#courses').listview('refresh');
            }
        });
    });

Answer 1

您可以使用beforeSend和complete事件$.ajax来调用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg.看起来像这样:

$('#main').live('pagecreate', function(event) {
        $.ajax({
            beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
            complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                //...
            }
        });
    });

Answer 2

在JQM 1.2之前:

$(document).ajaxStart(function() {
    $.mobile.showPageLoadingMsg();
});

$(document).ajaxStop(function() {
    $.mobile.hidePageLoadingMsg();
});

自JQM 1.2起:

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

http://api.jquerymobile.com/page-loading/

Answer 3

有几个人问我最终实施的解决方法,所以我想我会分享它.它没有什么特别优雅或复杂,但似乎确实有效.自从官方1.0发布以来,我没有使用过该框架,所以这可能已经在更新中解决了.本质上,我将$.mobile.showPageLoadingMsg()调用放入pageshow函数中,但将其包装在if子句中,该子句仅在第一次显示页面时触发:

var mainloaded = false;

$('#main').live('pageshow', function(event) {   //Workaround to show page loading on initial page load
    if(!mainloaded) {
    $.mobile.showPageLoadingMsg();
    }
});

$('#main').live('pagecreate', function(event) { 
    $.ajax({
        url: //url
        dataType: //datatype,
        headers: //headers
        success: function(data) {
            //
            //...loading stuff
            //
            $.mobile.hidePageLoadingMsg();
            mainloaded = true;
        }
        //
        //...handle error, etc.
        //
    });
});

Answer 4

这有点晚了......但你需要:

1. $.mobile.showPageLoadingMsg()在AJAX 呼叫之前呼叫.
2. 进行AJAX调用.呼叫需要异步发送(放入async: true您的呼叫).
3. 添加$.mobile.hidePageLoadingMsg()你的success()功能.

Answer 5

$(document).ajaxSend(function() {
    $.mobile.loading( 'show');
});
$(document).ajaxComplete(function() {
    $.mobile.loading( 'hide');
});