我希望在我的页面加载like here页面时显示正在运行的进度条。 我在我的示例中使用了一个简单的加载图像,但我想在正在运行的进度条中将其转换。这是我的代码:
$(window).load(function() {
alert("hi");
$('#loading').hide();
});
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="loading">
<img id="loading-image" src="http://cdn.nirmaltv.com/images/generatorphp-thumb.gif" alt="Loading..." />
</div>
<div id="txt">
<h2>Let AJAX change this text</h2>
</div>
<button>Change Content</button>
这是JSFiddle
答案 0 :(得分:12)
我已从This page复制了以下相关代码。希望这对你有帮助。
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data) {
//Do something success-ish
}
});
答案 1 :(得分:6)
这是一个鸡蛋问题。您将无法执行此操作,因为您需要加载资源以显示进度条小部件,此时您的页面将被完全或部分下载。此外,您需要知道用户请求之前页面的总大小,以便计算百分比。
这比它的价值更麻烦。
答案 2 :(得分:5)
简单步骤,遵循它们,我想它会解决您的问题
在您的页面中包含这些Css,
.progress {
position: relative;
height: 2px;
display: block;
width: 100%;
background-color: white;
border-radius: 2px;
background-clip: padding-box;
/*margin: 0.5rem 0 1rem 0;*/
overflow: hidden;
}
.progress .indeterminate {
background-color:black; }
.progress .indeterminate:before {
content: '';
position: absolute;
background-color: #2C67B1;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
.progress .indeterminate:after {
content: '';
position: absolute;
background-color: #2C67B1;
top: 0;
left: 0;
bottom: 0;
will-change: left, right;
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-webkit-animation-delay: 1.15s;
animation-delay: 1.15s; }
@-webkit-keyframes indeterminate {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; } }
@keyframes indeterminate {
0% {
left: -35%;
right: 100%; }
60% {
left: 100%;
right: -90%; }
100% {
left: 100%;
right: -90%; } }
@-webkit-keyframes indeterminate-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; } }
@keyframes indeterminate-short {
0% {
left: -200%;
right: 100%; }
60% {
left: 107%;
right: -8%; }
100% {
left: 107%;
right: -8%; } }
然后包含您的身体标签的进度条
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
然后它会在你的页面加载时开始,现在你要做的就是在页面加载时隐藏它,或者使用javascript将可见性设置为none或者隐藏,
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log(document.readyState);
document.getElementById("PreLoaderBar").style.display = "none";
}
}
让我知道您是否遇到任何问题,并且您可以添加任何类型的进度条,您可以轻松找到它们,对于此示例,我使用了一个不确定的进度条。
答案 3 :(得分:3)
在此示例中,我创建了一个JavaScript进度条(显示百分比),您可以控制它并使用JavaScript隐藏它。
在此示例中,进度条每100ms前进一次。您可以在JSFiddle
中查看var elapsedTime = 0;
var interval = setInterval(function() {
timer()
}, 100);
function progressbar(percent) {
document.getElementById("prgsbarcolor").style.width = percent + '%';
document.getElementById("prgsbartext").innerHTML = percent + '%';
}
function timer() {
if (elapsedTime > 100) {
document.getElementById("prgsbartext").style.color = "#FFF";
document.getElementById("prgsbartext").innerHTML = "Completed.";
if (elapsedTime >= 107) {
clearInterval(interval);
history.go(-1);
}
} else {
progressbar(elapsedTime);
}
elapsedTime++;
}
答案 4 :(得分:2)
看看这里,
html文件
var MyClass = (function() {
var calcSquare = function(number) { return number * number; };
var isPrime = function(number) { /* your prime code */ };
function MyClass(number) {
this.square = calcSquare(number);
this.isPrime = isPrime(number);
}
return MyClass;
})();
js file
<div class='progress' id="progress_div">
<div class='bar' id='bar1'></div>
<div class='percent' id='percent1'></div>
</div>
<div id="wrapper">
<div id="content">
<h1>Display Progress Bar While Page Loads Using jQuery<p>TalkersCode.com</p></h1>
</div>
</div>
它完全解决了您的完整教程的问题,这里是链接http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php