编辑：我特别想要一个使用jQuery Mobile的解决方案。 jQuery Mobile有特定的方法（据我所知），完全我想做什么。我不希望普通的Javascript与旋转gif。这不是我发布这个问题的原因。任何已接受的答案将涉及jQuery Mobile或向我解释为什么这是不可能的或为什么我不应该使用jQuery Mobile来实现此功能（假设jQuery Mobile已经加载到我的应用程序的页面上）
我有这个代码，我尝试了各种不同的方法来让一个jQuery移动微调器在PhoneGap中工作，但绝对没有成功。我最近的尝试是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="css/themes/random.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<title>Reddit</title>
<script>
$.mobile.showPageLoadingMsg();
$.mobile.loading('show');
</script>
<script src="js/jquery-1.11.2/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="js/random.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div role="main" class="ui-content">
<h2>Subreddit Name</h2>
<div id="output"></div>
</div>
</div>
<script src="js/snoocore/Snoocore-standalone.js"></script>
<script type="text/javascript">
(function() {
var reddit = new window.Snoocore({
userAgent: 'App Name',
login: {username: 'username', password: 'password'}
});
reddit.login();
// Get information about a slice of a listing:
function printSlice(slice) {
slice.stickied.forEach(function(item, i) {
var div = document.getElementById('output');
var p = document.createElement("p");
var ahref = document.createElement("a");
ahref.setAttribute("href", "redditarticle.html?link=" + item.data.id);
ahref.innerHTML = '**STICKY**' + item.data.title;
p.appendChild(ahref);
div.appendChild(p);
});
slice.children.forEach(function(child, i) {
var div = document.getElementById('output');
//div.setAttribute("")
var p = document.createElement("p");
var ahref = document.createElement("a");
ahref.setAttribute("href", "redditarticle.html?link=" + child.data.id);
ahref.innerHTML = child.data.title;
p.appendChild(ahref);
div.appendChild(p);
});
}
function getAll() {
var children = [];
function handleSlice(slice) {
if (slice.empty) {
return children;
}
printSlice(slice);
children = children.concat(slice.children);
if (slice.count > 1) {
return;
}
else {
return slice.next().then(handleSlice);
}
}
return reddit('/r/subreddit/hot').listing({
limit: 25,
}).then(handleSlice);
}
getAll().done();
})();
</script>
</body>
</html>
我希望显示一个加载图标，直到脚本可以从Reddit中提取数据。
我该如何实现？我试图在mobileinit上做一些事情，我试图在pagecreate和pagebeforecreate上做一些事情而且没有任何运气。
我想要的只是一个简单的移动微调器。
答案 0 :(得分：1)
使用在页面完全加载时淡出的叠加层。
HTML
<div id="loadingOverlay">
<img src="pageload.gif" alt="The page is loading" />
Please Wait
</div>
脚本
$(window).load(function(){
$('#loadingOverlay').fadeOut();
});
答案 1 :(得分：1)
jquery移动加载器的工作方式如下：http://jsfiddle.net/9ybagLpb/2/
尝试删除以下内容：
<script>
$.mobile.showPageLoadingMsg();
$.mobile.loading('show');
</script>
并将您的脚本更新为：
(function () {
setTimeout(function(){
$.mobile.loading('show');
},1);
var reddit = new window.Snoocore({
userAgent: 'App Name',
login: {
username: 'username',
password: 'password'
}
});
reddit.login();
// Get information about a slice of a listing:
function printSlice(slice) {
slice.stickied.forEach(function (item, i) {
var div = document.getElementById('output');
var p = document.createElement("p");
var ahref = document.createElement("a");
ahref.setAttribute("href", "redditarticle.html?link=" + item.data.id);
ahref.innerHTML = '**STICKY**' + item.data.title;
p.appendChild(ahref);
div.appendChild(p);
});
slice.children.forEach(function (child, i) {
var div = document.getElementById('output');
//div.setAttribute("")
var p = document.createElement("p");
var ahref = document.createElement("a");
ahref.setAttribute("href", "redditarticle.html?link=" + child.data.id);
ahref.innerHTML = child.data.title;
p.appendChild(ahref);
div.appendChild(p);
});
}
function getAll() {
var children = [];
function handleSlice(slice) {
if (slice.empty) {
return children;
}
printSlice(slice);
children = children.concat(slice.children);
if (slice.count > 1) {
return;
} else {
return slice.next().then(handleSlice);
}
}
return reddit('/r/subreddit/hot').listing({
limit: 25,
}).then(handleSlice);
}
getAll().done(function () {
setTimeout(function(){
$.mobile.loading('hide');
},1);
});
})();
注意 Web-kit浏览器遇到了jQuery Mobile loader的编程执行问题，如此处所述 $.mobile.showPageLoadingMsg() is not working
希望有所帮助！
答案 2 :(得分：0)
使用纯javascript，html和css：
HTML：
<div id="loader">
</div>
CSS：
#loader {
position:fixed;
z-index:9999;
min-width:100%;
min-height:100%;
background-color: green;
background-image:url('urlToGifAnimation');
background-position: center;
background-size: 50px 50px;
background-repeat: no-repeat;
top:0;
left:0;
}
的javascript：
window.onload = function(){
//Hide loader
var loader = document.getElementById("loader");
loader.style.opcaity=0;
loader.style.display='none';
}
window.onload才会触发（dom，images ...）
您不需要任何jquery，如果有可用的javascript解决方案，则不建议使用它。