進度條核心方法，通常j不考慮判斷到100，根據項目中的圖片數量可能有所差異所以到95就可以了
//根據圖片load進度條 function loadingAsImgLength(){ var precent= 1; var imglen = $('img').length; for(var i = 0; i < imglen; i++){ var imgs = new Image(); imgs.src = $('img').eq(i).attr("src"); imgs.onload = function () { precent= precent+=1; var num = parseInt((precent/(imglen-1))*100); var j = num; j = isNaN(j)?100:j; (function (j) { setTimeout(function () { //開始加載 $(".load_tips font").html(j+"%"); if(j>=95){ j = 100; $(".load_tips font").html("100%"); setTimeout(function(){ console.log("加載完成后的操作"); },200) return; } },j*15) })(j) } } }
下面是用canvas畫的一個進度實現。
創建HTML文件，CSS文件和JavaScript文件，並引入jquery。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<title>圓形進度條加載</title>
</head>
<link rel="stylesheet" href="css/circle.css">
<body>
<div class="periphery">
<canvas id="circleCanvas" width="200" height="200"></canvas>
<!--請用img標簽添加圖片資源進行測試，越多越好，為避免看不到效果請把canvas層級調高-->
<img src='a.jpg'/>
<img src='a.jpg'/>
<img src='a.jpg'/>
<img src='a.jpg'/>
</div>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/circle.js" ></script>
</body>
</html>
css樣式，自行調整大小或位置
/*初始化頁面*/
*{
padding:0;
margin:0;
border:0;
}
body,html{
width:100%;
height:100%;
overflow: hidden;
}
.periphery{
width:100%;
height:100%;
position: relative;
background: #ccc;
}
#circleCanvas{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.periphery img{
opacity: 0;
}
接下來是核心功能實現，采用js繪制並渲染canvas
function drawCircleLoading(ctx,progress){
ctx.clearRect(0,0,200,200);
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle='rgba(50,207,224,1)';
ctx.arc(100,100,40,0,2 * Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=4;
ctx.strokeStyle='rgba(50,207,224,1)';
ctx.arc(100,100,50,0,2 * Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=4;
ctx.strokeStyle='rgba(0,0,0,0.2)';
ctx.arc(100,100,50,0,2 * Math.PI,false);
ctx.stroke();
ctx.beginPath();
ctx.save()
ctx.translate(0,200);
ctx.rotate(270 * Math.PI/180);
ctx.lineWidth=10;
ctx.strokeStyle='rgba(0,0,0,0.2)';
ctx.arc(100,100,40,0,1.9999 * Math.PI * (progress * 0.01),true);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.font="18px Arial";
ctx.fillStyle="#0000ff";
ctx.fillText(progress+"%",100 - (ctx.measureText(progress+"%").width) / 2,100 + 6);
ctx.fill();
ctx.closePath();
}
//根據圖片load進度條
function loadingAsImgLength(){
//創建Canvas
var c=document.getElementById("circleCanvas");
var ctx=c.getContext("2d");
var precent= -1;
var imglen = $('img').length;
for(var i = 0; i < imglen; i++){
var imgs = new Image();
imgs.src = $('img').eq(i).attr("src");
imgs.onload = function () {
precent= precent+=1;
var num = parseInt((precent/(imglen-1))*100);
var j = num;
(function (j) {
setTimeout(function () {
//開始加載
drawCircleLoading(ctx,j);
console.log(j)
if(j>=100){
j = 100;
drawCircleLoading(ctx,j);
setTimeout(function(){
//這里放加載結束后的操作代碼
// alert("over");
},600)
return;
}
},j*20)
})(j)
}
}
}
$(function(){
loadingAsImgLength();
})
注意事項：請保證圖片路徑正確，並盡可能添加多的img標簽來確保看到效果。
最終實現的效果圖：
