如何在页面加载时显示正在运行的进度条
How to show a running progress bar while page is loading
我想在我的页面加载时显示一个正在运行的进度条,就像在我的页面中一样。我在示例中使用了一个简单的加载图像,但我想在正在运行的进度条中转换它。这是我的代码:
$(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
我已经从此页面复制了下面的相关代码。希望这对您有所帮助。
$.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
}
});
这是一个先有鸡还是先有蛋的问题。您将无法执行此操作,因为您需要加载资产以显示进度条小部件,届时您的页面将被完全或部分下载。此外,您需要在用户请求之前知道页面的总大小,以便计算百分比。
这比它的价值更麻烦。
简单的步骤,按照它们,我想它会解决你的问题
将这些 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 将可见性设置为无或隐藏,
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log(document.readyState);
document.getElementById("PreLoaderBar").style.display = "none";
}
}
如果您遇到任何问题,请告诉我,并且您可以添加任何类型的进度条,您可以轻松找到它们,对于此示例,我使用了不确定的进度条。
在这个例子中,我创建了一个JavaScript进度条(带有百分比显示),你可以用JavaScript控制它和隐藏它。
在此示例中,进度条每 100 毫秒前进一次。你可以在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++;
}
看看这里。
它绝对解决了您的问题,因为完整的教程是链接
演示
document.onreadystatechange = function(e) {
if (document.readyState == "interactive") {
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
set_ele(all[i]);
}
}
}
function check_element(ele) {
var all = document.getElementsByTagName("*");
var totalele = all.length;
var per_inc = 100 / all.length;
if ($(ele).on()) {
var prog_width = per_inc + Number(document.getElementById("progress_width").value);
document.getElementById("progress_width").value = prog_width;
$("#bar1").animate({
width: prog_width + "%"
}, 10, function() {
if (document.getElementById("bar1").style.width == "100%") {
$(".progress").fadeOut("slow");
}
});
} else {
set_ele(ele);
}
}
function set_ele(set_element) {
check_element(set_element);
}
body
{
margin:0px; auto;
padding:0px;
font-family:helvetica;
}
.progress
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #F2F2F2;
}
.bar
{
background-color: #819FF7;
width:0%;
height:5px;
border-radius: 3px;
}
.percent
{
position:absolute;
display:inline-block;
top:3px;
left:48%;
}
#wrapper
{
width:995px;
padding:0px;
margin:0px auto;
font-family:helvetica;
text-align:center;
}
h1
{
text-align:center;
font-size:35px;
margin-top:60px;
color:#A9BCF5;
}
h1 p
{
text-align:center;
margin:0px;
font-size:18px;
text-decoration:underline;
color:grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<input type="hidden" id="progress_width" value="0">
相关文章:
- 如何在运行时在angular 2中加载外部js脚本
- 如何在加载网页时运行脚本
- 为什么我的javascript脚本在页面加载时运行,而不是使用onclick
- 如何在加载角度函数后运行jQuery代码
- 如何使用特定的javascript函数创建一个url,以便在加载页面时运行
- Javascript - 加载函数运行时未定义的变量
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 如何让C#代码在页面加载时运行的jquery脚本之后运行
- 有没有一种方法可以在服务器端页面加载之前在加载时运行javascript
- 如何在内部脚本完全加载后运行脚本
- 在不加载页面的情况下运行javascript
- 在运行时加载knockout.jslib
- Jquery脚本未在运行时加载编辑:意外的令牌
- Javascript:如何在页面重新加载后运行函数
- 在页面加载完成之前,使用URL参数运行JavaScript
- 无法使用javascript插件在首次运行时加载实际图像大小(图像在刷新后加载)
- 如何更改javascript的一个变量,然后运行;“加载”;而无需重新加载页面
- jQuery-只有在所有表单字段都有效的情况下才运行加载图形函数
- 修改此代码以在窗口上运行.加载而不是表单提交
- 如何从javascript内部选择性地运行/加载单独的javascript文件