如何在页面加载时显示正在运行的进度条
我想在我的页面加载时显示一个正在运行的进度条 喜欢这里,在我的页面中.我在示例中使用了一个简单的加载图像,但我想将其转换为正在运行的进度条.这是我的代码:
I want to show a running progress bar while my page is loading like here, in my page. I used a simple loading image in my example, but I want to convert it in a running progress bar. Here is my code:
$(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
推荐答案
我从这个页面.希望这对您有所帮助.
I have copied the relevant code below from This page. Hope this might help you.
$.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
}
});
相关文章