下面我们一起来看看关于javascript图片加载配合html5的progress进度条，希望本文章对各位同学会有所帮助。
下面我们开始一步步实做这个效果：
1.创建HTML5 页
首先创建基本的HTML 5基本框架页
| 代码如下 |
|
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
|
2.增加进度条标签
首先，在body部分，添加如下的进度条的标签：
| 代码如下 |
|
| 1 <progress id="prog" value="0" max="100"></progress> |
HTML 5中的进度条使用的是<progress>标签，在这里，设置了开始的值value为0，最大的值为100，当任务完成后，进度条的值就会变成100了。我们将通过Javascript去更新这个值，所以以上的标签只是对进度条进行了初始化工作。
3. 点击按钮的编写
现在，我们开始编写点击按钮的事件，代码如下：
| 代码如下 |
|
|
<input id="startBtn" type="button" value="start" onclick="startProgress()"/>
<div id="numValue">0%</div>
|
其中startProcess()的代码如下：
| 代码如下 |
|
|
//当前进度
var currProgress = 0;
//进度条是否完成
var done = false;
//进度条计数的最大数值
var total = 100;
|
在声明了上面的变量后，就可以编写startProgress()方法了，代码如下：
| 代码如下 |
|
function startProgress() {
//获得进度条的标签
var prBar = document.getElementById("prog");
//获得开始按键
var startButt = document.getElementById("startBtn");
//显示的进度百分比数值
var val = document.getElementById("numValue");
} |
接下来，当用户点了开始按钮后，需要将按钮设置为不可用，并且要更新进度条的数值：
| 代码如下 |
|
|
startButt.disabled=true;
prBar.value = currProgress;
|
并且要显示出进度条当前完成的百分比并显示出来，使用如下的代码：
| 代码如下 |
|
|
val.innerHTML =Math.round((currProgress/total)*100)+"%";
|
接着就可以对进度条的数字进行累加了：
并且要判断如果进度数值达到100的话，则停止，设置done=false的标识，否则每0.1秒通过Javascript的setimeout方法进行延时，如下：
| 代码如下 |
|
if(currProgress>100) done=true;
//如果还没到进度条100的数值，则继续累加
if(!done)
setTimeout("startProgress()", 100);
//如果进度条已经达到100的数值，则重新设置按钮可用，重新设置currProgrss=0
else
{
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
} |
最后完成的代码如下：
| 代码如下 |
|
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>W3CoderKing-HTML5滚动条标签 | progress</title>
<script type="text/javascript">
//当前进度
var currProgress = 0;
//进度条是否完成
var done = false;
//进度条计数的最大数值
var total = 100;
function startProgress() {
//获得进度条的标签
var prBar = document.getElementById("prog");
//获得开始按键
var startButt = document.getElementById("startBtn");
//显示的进度百分比数值
var val = document.getElementById("numValue");
startButt.disabled=true;
prBar.value = currProgress;
val.innerHTML = Math.round((currProgress/total)*100)+"%";
currProgress++;
if(currProgress>100) done=true;
if(!done)
setTimeout("startProgress()", 100);
else
{
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
}
</script>
</head>
<body>
<progress id="prog" value="0" max="100"></progress>
<input id="startBtn" type="button" value="start" onclick="startProgress()"/>
<div id="numValue">0%</div>
</body>
</html>
|
例子
| 代码如下 |
|
|
<div class="entry">
<div id="entry">
<p><br />
<br />
<br />
<meta charset="UTF-8" /></p>
<style type="text/css">
li {
width:200px;
height:auto;
}
li img {
max-width: 100%;
}
</style>
<p> </p>
<progress id="progress" value="0" max="100"></progress>
<span>0%</span>
<ul id="ul-list">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<p><br />
<br />
<script>
function back(arr,succfn){</p>
<p> var loaded=0;
var oPr=document.querySelector("#progress");
var aList=document.querySelector("#ul-list").children;</p>
<p> for(var i=0;i<arr.length;i++){</p>
<p> var oImg=new Image();
oImg.onload=function (){
loaded++;
oPr.value=loaded * (loaded/arr.length*10);
document.title=oPr.value;
aList[loaded-1].innerHTML="<img src="+arr[loaded-1]+" />";
if(loaded==arr.length) {
succfn();//回调函数
}
}
oImg.onerror=function() {
loaded++;
}
oImg.src=arr[i];
}
}
window.onload=function(){</p>
<p> back(
[
"/rozne/wallpaper-1792999.jpg",
"/rozne/wallpaper-2215424.jpg",
"/rozne/wallpaper-2192771.jpg",
"/rozne/wallpaper-1443743.jpg",
"/rozne/wallpaper-435976.jpg",
"/rozne/wallpaper-2786892.png",
"/rozne/wallpaper-2646159.jpg",
"/rozne/wallpaper-1667415.jpg",
"/rozne/wallpaper-151191.jpg",
"/rozne/wallpaper-2603874.jpg"</p>
<p> ],
function(){
alert("加载完成");
window.location.href="www.111cn.net";
}
);
}
</script></p>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
|
