如何在jQuery Mobile中更改默认加载ajax加载器gif

Question

I have already seen the docs for jquery mobile but couldn't understand how to integrate it on my mobile website. 我已经看过jquery mobile的文档，但是不知道如何将其集成到我的移动网站上。 The docs are here at 文档在这里

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. 但是新的imag无法正确缩放，并且旧的背景仍然可见。

I am a complete noob with javascript.can someone plz help me with this? 我对javascript完全陌生。有人可以帮我吗？

Answer 1

You are mentioning the jQM 1.2 Alpha Docs so my answer is based in this jQM version. 您提到的是jQM 1.2 Alpha文档，因此我的答案基于此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 Docs所述：

When jQuery Mobile starts, it triggers a mobileinit event on the document object. jQuery Mobile启动时，它将触发文档对象上的mobileinit事件。 To override default settings, bind to mobileinit. 要覆盖默认设置，请绑定到mobileinit。 Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. 由于mobileinit事件是立即触发的，因此您需要在加载jQuery Mobile之前绑定事件处理程序。 Link to your JavaScript files in the following order: 按以下顺序链接到您的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 prototype选项中的加载程序。

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 EDITED

For jQM 1.1.1 version there are the following configurable options: 对于jQM 1.1.1版本，有以下可配置选项：

loadingMessage string, default: "loading" loadingMessage字符串，默认值：“ loading”
Set the text that appears when a page is loading. 设置页面加载时显示的文本。 If set to false, the message will not appear at all. 如果设置为false，则完全不会显示该消息。

loadingMessageTextVisible boolean, default: false loadingMessageTextVisible布尔值，默认值：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" loadingMessageTheme字符串，默认值：“ a”
The theme that the loading message box uses when text is visible. 文本可见时，加载消息框使用的主题。

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. 此外，您可以尝试覆盖用于设置jQM加载程序样式的默认CSS。 More specifically you could modify or override the styles in the section loading screen and the style in the section loading icon which are used to depict the page loader. 更具体地说，您可以修改或覆盖部分加载屏幕中的样式以及用于描述页面加载器的部分加载图标中的样式。

You will find here the 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; }

如何在jQuery Mobile中更改默认加载ajax加载器gif

问题描述

1 个解决方案

解决方案1
5 已采纳 2012-09-01 08:17:41

如何在jQuery Mobile中更改默认加载ajax加载器gif

问题描述

1 个解决方案

解决方案1 5 已采纳 2012-09-01 08:17:41

解决方案1
5 已采纳 2012-09-01 08:17:41