我已经看过 jquery mobile 的文档，但不明白如何将它集成到我的移动网站上。文档在这里
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
实际上 gif 图像在 2.x android 设备上没有动画效果，所以我正在考虑制作一个纯文本类型的预加载小部件。
我尝试像这样通过 css 更改它
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
但新图像无法正确缩放，旧背景仍然可见。
我是 javascript 的菜鸟。有人可以帮我解决这个问题吗？
【问题讨论】：
标签： javascript android jquery mobile jquery-mobile
您提到的是 jQM 1.2 Alpha Docs，所以我的回答基于这个 jQM 版本。
您可以在下面找到 2 个更改默认加载器图像的选项。
解决方案 1
如 jQM 1.2 Alpha Docs 中所述：
当 jQuery Mobile 启动时，它会在文档对象上触发一个 mobileinit 事件。要覆盖默认设置，请绑定到 mobileinit。因为 mobileinit 事件会立即触发，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。按以下顺序链接到您的 JavaScript 文件：
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
要全局配置加载对话框，可以在 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 原型选项中的加载程序。
例子：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(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 = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.loading('show');
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
解决方案 2
覆盖用于描述页面加载器的默认 CSS 样式。
已编辑
对于jQM 1.1.1 version，有以下可配置选项：
- loadingMessage 字符串，默认：“正在加载”
设置页面加载时显示的文本。如果设置为 false，则消息根本不会出现。- loadingMessageTextVisible 布尔值，默认：false
显示加载消息时文本是否可见。对于加载错误，文本始终可见。- loadingMessageTheme 字符串，默认：“a”
文本可见时加载消息框使用的主题。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).bind( 'mobileinit', function(){
$.mobile.loadingMessageTheme = 'e';
$.mobile.loadingMessageTextVisible = true;
$.mobile.loadingMessage = "test";
});
</script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
$.mobile.showPageLoadingMsg();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Test</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<button class="show-page-loading-msg">Click</button>
</div>
</div>
</body>
</html>
此外，您可以尝试覆盖用于设置 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; }
【讨论】：