Css Ajax加载程序工作不正常

我正在尝试使用jquery移动微调器，但它似乎不起作用

$( 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 = "<i class='icon-spinner icon-4x'></i>";
});

从官方文档（）中，我尝试在chrome控制台中运行此功能，它可以正常工作

$.mobile.loading( 'show', {
    text: 'foo',
    textVisible: true,
    theme: 'z',
    html:  "<i class='icon-spinner icon-4x'></i>"
});

$.mobile.loading（'show'{
文本：“foo”，
textVisible：对，
主题：“z”，
html:“
});

但是，如果我尝试从application.html.haml或控制台运行此程序，则似乎不起作用

$( 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 = "<i class='icon-spinner icon-4x'></i>";
});

$（document）.bind（'mobileinit'，function（）{
$.mobile.loader.prototype.options.text=“加载”；
$.mobile.loader.prototype.options.textVisible=false；
$.mobile.loader.prototype.options.theme=“a”；
$.mobile.loader.prototype.options.html=“”；
});

它显示一个阴影，而不是我的微调器：-

我错过了什么

---

谢谢：）

解决方案：

工作区：

Mobileinit

事件必须在jQuery Mobile初始化之前和jQuery之后初始化。此外，还必须对css进行一些额外的更改，以使其正常工作

首先，我们需要覆盖default

ui-loader-default

类，因为它的不透明度很低，并且很难看到最终的微调器。根据需要更改“不透明度”值

.ui-loader-default {
    opacity: 1 !important;      
}

这是我们的纺纱机。因为您使用的是自定义i标记，所以我们需要使用

display:block

，没有它，微调器将被隐藏

.custom-spinner {
    width: 37px !important;
    height: 37px !important;
    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
    display: block;
}

下面是一个工作示例：

HTML:

jQM复杂演示
.ui加载程序默认值{
不透明度：1！重要；
}
.定制微调器{
宽度：37px！重要；
高度：37px！重要；
背景图像：url（'http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
不透明度：1！重要；
显示：块；
}
$（文档）.bind（'mobileinit'，function（）{
$.mobile.loader.prototype.options.text=“加载”；
$.mobile.loader.prototype.options.textVisible=false；
$.mobile.loader.prototype.options.theme=“a”；
$.mobile.loader.prototype.options.html=“”；
}); 
$（document）.on（'pageshow'，'#index'，function（）{
$.mobile.loading（'show'）；
}); 
首页

很可能您的CSS与图像的链接不正确，因为微调器是设置为CSS背景的gif