jquery mobile ajax-loader.gif,如何更改jquery mobile的默认加载ajax loader gif

您提到的是jQM 1.2 Alpha Docs，所以我的回答基于这个jQM版本。

下面你可以找到2个选项来更改默认的加载镜像。

溶液1

如JQM 1.2阿尔法文档指出：

当jQuery Mobile的启动时，它触发文档对象上的mobileinit事件。要覆盖默认设置，请绑定到mobileinit。由于mobileinit事件是立即触发的，因此您需要在加载jQuery Mobile之前绑定事件处理程序。链接到您的JavaScript文件按以下顺序：

全局配置加载对话框下面的设置可以在它的原型mobileinit活动期间进行定义：

$(document).bind('mobileinit', function(){

$.mobile.loader.prototype.options.text = "loading";

$.mobile.loader.prototype.options.textVisible = false;

$.mobile.loader.prototype.options.theme = "a";

$.mobile.loader.prototype.options.html = "";

});

下面你可以找到一个可以在html原型选项中完全定制加载器的工作示例。

例子：

Page Title

$(document).bind('mobileinit', function(){

$.mobile.loader.prototype.options.text = "loading";

$.mobile.loader.prototype.options.textVisible = true;

$.mobile.loader.prototype.options.theme = "a";

$.mobile.loader.prototype.options.textonly = false;

$.mobile.loader.prototype.options.html = "

loading

";

});

$(document).on("click", ".show-page-loading-msg", function() {

$.mobile.loading('show');

});

Test

Click

解决方案2

覆盖用来描绘页面加载默认的CSS样式。

EDITED

loadingMessage字符串，默认： “加载”

设置，当网页加载显示的文本。如果设置为false，则该消息根本不会显示。

loadingMessageTextVisible布尔值，默认值：false

显示加载消息时文本是否应该可见。文本始终可见，用于加载错误。

loadingMessageTheme字符串，默认值：“a”

加载消息框在文本可见时使用的主题。

代码示例：

Page Title

$(document).bind('mobileinit', function(){

$.mobile.loadingMessageTheme = 'e';

$.mobile.loadingMessageTextVisible = true;

$.mobile.loadingMessage = "test";

});

$(document).on("click", ".show-page-loading-msg", function() {

$.mobile.showPageLoadingMsg();

});

Test

Click

而且你可以尝试重写用于样式的JQM加载默认的CSS。更具体地说，您可以修改或覆盖加载屏幕和加载图标中用于描述页面加载器的样式中的样式。你会发现here jQM 1.1.1中使用的CSS。

/* loading icon */

.ui-icon-loading {

background: url(images/ajax-loader.gif);

background-size: 46px 46px;

}

/* loading screen */

.ui-loading .ui-loader { display: block; }

.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }

.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }

.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }

.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }

.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }

.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }

.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }

.ui-loader-textonly { padding: 15px; margin-left: -115px; }

.ui-loader-textonly .ui-icon { display: none; }

.ui-loader-fakefix { position: absolute; }