Android 如何更改 jquery mobile 中的默认加载 ajax 加载器 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12225126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change the default load ajax loader gif in jquery mobile
提问by Nav
I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. The docs are here at
我已经看过 jquery mobile 的文档，但不明白如何将它集成到我的移动网站上。文档在这里
http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html
Actually the gif image doesn't animate on 2.x android devices so I am thinking about making a text only kind of pre loading widget.
实际上 gif 图像在 2.x android 设备上没有动画，所以我正在考虑制作一个纯文本类型的预加载小部件。
I tried changing it via css like this
我试着像这样通过 css 改变它
.ui-icon-loading {
background: url(themes/images/custom-ajax-loader.gif);
}
but the new imag doesn't scale properly and the old background is still visible.
但新图像无法正确缩放，旧背景仍然可见。
I am a complete noob with javascript.can someone plz help me with this?
我是一个完全不懂 javascript 的菜鸟。有人可以帮我解决这个问题吗？
回答by Apostolos Emmanouilidis
You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version.
您提到了 jQM 1.2 Alpha Docs，所以我的回答基于此 jQM 版本。
Below you can find 2 options to change the default loader image.
您可以在下面找到 2 个更改默认加载程序图像的选项。
Solution 1
解决方案1
As stated in the jQM 1.2 Alpha Docs:
如 jQM 1.2 Alpha 文档中所述：
When jQuery Mobile starts, it triggers a mobileinit event on the document object. To override default settings, bind to mobileinit. Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
当 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>
To configure the loading dialog globally the following settings can be defined on its prototype during the mobileinit event:
要全局配置加载对话框，可以在 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 = "";
});
Below you can find a working example in which you can fully customize the loader in the html prototype option.
您可以在下面找到一个工作示例，您可以在其中完全自定义html 原型选项中的加载程序。
Example:
例子：
<!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>
Solution 2
解决方案2
Override the default CSS styles used to depict the page loader.
覆盖用于描述页面加载器的默认 CSS 样式。
EDITED
已编辑
For jQM 1.1.1 versionthere are the following configurable options:
对于jQM 1.1.1 版本，有以下可配置选项：
- loadingMessage string, default: "loading"
Set the text that appears when a page is loading. If set to false, the message will not appear at all.- loadingMessageTextVisible boolean, default: false
Whether the text should be visible when a loading message is shown. The text is always visible for loading errors.- loadingMessageTheme string, default: "a"
The theme that the loading message box uses when text is visible.
- loadingMessage 字符串，默认值："loading"
设置页面加载时出现的文本。如果设置为 false，则根本不会显示该消息。- loadingMessageTextVisible 布尔值，默认值：false
显示加载消息时文本是否应该可见。对于加载错误，文本始终可见。- loadingMessageTheme 字符串，默认值："a"
文本可见时加载消息框使用的主题。
Code example:
代码示例：
<!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>
Furthermore you could try to override the default CSS used to style the jQM loader. More specifically you could modify or override the styles in the section loading screenand the style in the section loading iconwhich are used to depict the page loader.
此外，您可以尝试覆盖用于设置 jQM 加载器样式的默认 CSS。更具体地说，您可以修改或覆盖部分加载屏幕中的样式以及用于描述页面加载器的部分加载图标中的样式。
You will find herethe CSS used in jQM 1.1.1.
您将在此处找到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; }
