Question

我已经测试了http://api.jquerymobile.com/loader/中的代码。

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>loader demo</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<div data-role="controlgroup">
<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="false" data-msgtext="" data-icon="arrow-r" data-iconpos="right">Default loader</button>
<button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Text only loader" data-icon="arrow-r" data-iconpos="right">Text only</button>
<button class="show-page-loading-msg" data-theme="b" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme a" data-icon="arrow-r" data-iconpos="right">Theme a</button>
<button class="show-page-loading-msg" data-theme="a" data-textonly="false" data-textvisible="true" data-msgtext="Loading theme b" data-icon="arrow-r" data-iconpos="right">Theme b</button>
<button class="show-page-loading-msg" data-theme="b" data-textonly="true" data-textvisible="true" data-msgtext="Custom Loader" data-icon="arrow-r" data-html="<span class='ui-bar ui-overlay-a ui-corner-all'><img src='../_assets/images/jquery-logo.png' /><h2>is loading for you ...</h2></span>" data-iconpos="right">Custom HTML</button>
<button class="hide-page-loading-msg" data-icon="delete" data-iconpos="right">Hide</button>
</div>
</div>
</div>
<script>
$(document).on( "click", ".show-page-loading-msg", function() {
var $this = $( this ),
theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
textonly = !!$this.jqmData( "textonly" );
html = $this.jqmData( "html" ) || "";
$.mobile.loading( 'show', {
text: msgText,
textVisible: textVisible,
theme: theme,
textonly: textonly,
html: html
});
})
.on( "click", ".hide-page-loading-msg", function() {
$.mobile.loading( "hide" );
});
</script>
</body>
</html>

首先使用phoegap create命令创建了phonegap应用程序。然后添加了（//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css）中的css文件。在js文件夹中添加了js文件（// code.jquery.com/jquery-1.10.2.min.js,//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min。 js）。然后运行应用程序使用phonegap运行android.After在移动设备上安装apk。加载图标显示不好。黑色圆形内的白色装载机没有显示。任何人都可以帮我修复？ enter image description here

Answer 1

对我来说，问题是JQuery mobile的css文件类似于

.ui-icon-loading{background:url("../../../../../Downloads/ajax-loader.gif")

这是老实说的废话，所以我把它修好了

.ui-icon-loading{background:url(ajax-loader.gif)

Answer 2

我也有同样的问题。我通过将图像文件夹放在包含ajax-loader.gif和一些默认图标的css文件夹中克服了这一点。

加载图标未显示在jquery移动应用程序中

2 个答案: