jquery ajax无限加载中,jQuery Mobile 手动显示ajax加载器，提示加载中...

在使用jQuery Mobile开发时，有时候我们需要在请求ajax期间，显示加载提示框(例如：一个旋转图片+一个提示：加载中...)。这个时候，我们可以手动显示jQuery Mobile的加载器，大致流程如下：

1. 启动加载器，显示“加载中...”；

2. 进行ajax请求，请求完成后更新页面数据，刷新jQuery Mobile控件样式；

3. 关闭加载器。

下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单，几行代码就OK了！)。

首先是jQuery Mobile 1.2.0 引用：

html>

Ajax测试

编写javascript函数：

//显示加载器

function showLoader() {

//显示加载器.for jQuery Mobile 1.2.0

$.mobile.loading('show', {

text: '加载中...', //加载器中显示的文字

textVisible: true, //是否显示文字

theme: 'a',        //加载器主题样式a-e

textonly: false,   //是否只显示文字

html: ""           //要显示的html内容，如图片等

});

}

//隐藏加载器.for jQuery Mobile 1.2.0

function hideLoader()

{

//隐藏加载器

$.mobile.loading('hide');

}

准备两个按钮，一个用于启动(显示)加载器，一个用于停止(隐藏)加载器：

Ajax测试

Ajax测试

效果如下(主题为：'a')：

当然，你可以调整$.mobile.loading('show', { ... }中的参数，实验各种不同的加载器效果。

加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明：

注意：jQuery Mobile1.1.0中显示ajax加载器与1.2.0版本完全不同！坑爹！

jQuery Mobile 1.1.0显示加载器的代码如下：

//显示加载器

function showLoader() {

//显示加载器.for jQuery Mobile 1.1.0

$.mobile.loadingMessage = '加载中...';     //显示的文字

$.mobile.loadingMessageTextVisible = true; //是否显示文字

$.mobile.loadingMessageTheme = 'a';        //加载器主题样式a-e

$.mobile.showPageLoadingMsg();             //显示加载器

}

//隐藏加载器.for jQuery Mobile 1.1.0

function hideLoader() {

//隐藏加载器

$.mobile.hidePageLoadingMsg();

}

显示的效果倒是差不多。

官方1.2.0文档中对1.1.0的说明如下：

The page loading dialog was previously configured globally with three settings

$.mobile.loadingMessage,

$.mobile.loadingMessageTextVisible, and

$.mobile.loadingMessageTheme

which are now deprecated. In addition to the methods for showing and hiding,

$.mobile.showPageLoadingMsg and

$.mobile.hidePageLoadingMsg are also deprecated.

意思就是说：在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg这两个方法显示加载器了。

有问题欢迎提问交流！