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

问题描述：

我测试了代码http://api.jquerymobile.com/loader/。加载图标未显示在jquery移动应用程序

<!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创建command.Then添加的CSS文件这是在（//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min的PhoneGap的应用.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在mobile.The加载图标不能很好地显示。黑色圆内的白色加载程序不显示。任何人都可以帮我修复？ enter image description here

答

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

答

对我来说，问题是，css文件jQuery Mobile的有这样的事情

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

这是诚实废话，所以我把它固定

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

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

相关推荐