编辑:我特别想要一个与 jQuery Mobile 一起使用的解决方案。 jQuery Mobile 有特定的方法(据我所知)可以精确地完成我想做的事情。我不想要带有旋转 gif 的纯 JavaScript。这不是我发布这个问题的原因。任何接受的答案都将涉及 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 上执行操作，但都没有成功。
我想要的只是一个简单的移动微调器。
最佳答案
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 加载程序的编程执行方面存在问题，如此处所述 $.mobile.showPageLoadingMsg() is not working
希望有帮助!
关于javascript - 在数据加载之前如何拥有 jQuery 移动微调器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28675496/