版权声明： https://blog.csdn.net/qq_41115965/article/details/83718335
百分比形式进度条
1、思路分析
- 首先，获取页面中的所有 img 标签，并进行遍历，对 img 标签的 src 属性赋值。
- 根据遍历的图片的数量，计算对应的百分比，改变 span 标签中的数字。
- 当遍历全部之后，隐藏对应的标签。
二、JS代码（关键）
$(function() {
var img = $("img");
var num = 0;
img.each(function(i) {
var oImg = new Image();
oImg.onload = function() {
oImg.onload = null;
num++;
var persentNum = parseInt(num / $("img").length * 100)
$(".loading b").html(persentNum + "%");
if (num >= i) {
$(".loading").fadeOut();
}
}
oImg.src = img[i].src;
})
})
三、HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>进度条制作</title>
<link rel="stylesheet" type="text/css" href="css/index4.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="loading">
<div class="picture">
<span></span>
<b>0%</b>
</div>
</div>
<div class="container">
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/2018-01-06/5a50674a7b626.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/2018-06-08/5b1a448a79175.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/flower/digital_flower_jp_03/wallpapers/1680x1050/wallcoo.com_Digital_Flower_Photo_321.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/nature/2009_Landscape_1680_Desktop_04/wallpapers/1680x1050/Rising%20Mist%20at%20Dawn.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/photograph/Fresh%20Vegetables%20by%20Isabelle%20Rozenbaum/wallpapers/1440x900/Bunch%20of%20radishes%2C%20close-up.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1208/2044/ntk-2044-14905.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/cartoon/Semafore_Calendar_Project_1920/wallpapers/1280x800/Calendar_Design_2003.04.jpg">
</div>
<div class="item">
<img src="http://www.wallcoo.com/cartoon/future_tech_background/wallpapers/1680x1050/%5Bwallcoo_com%5D_3516_future_TECH_Image.jpg">
</div>
<div class="item">
<img src="http://i1.3conline.com/images/piclib/201305/20/batch/1/176010/13690210721960gaa56pug9.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1207/1030/ntk119230.jpg">
</div>
<div class="item">
<img src="http://img2.niutuku.com/desk/1207/1041/ntk120340.jpg">
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541335588899&di=d100aadf6f71aedb63a716d11d1644e5&imgtype=0&src=http%3A%2F%2Fimg3.iqilu.com%2Fdata%2Fattachment%2Fforum%2F201308%2F22%2F173304n1uctpp6htpt1hb8.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/3/510b709821ec1.jpg">
</div>
<div class="item">
<img src="http://download.firefox.com.cn/gfox/wallpaper/2013/06/1920x1200.jpg">
</div>
<div class="item">
<img src="http://pic1.win4000.com/wallpaper/a/51f1e196b5576.jpg">
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541335077849&di=a8aaf9a754368763358798c118d26c97&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F5878387f6e1c9.jpg">
</div>
</div>
</body>
</html>
<script src="js/index4.js" type="text/javascript" charset="utf-8"></script>
四、CSS文件
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
.loading .picture {
width: 100px;
height: 100px;
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
margin: auto;
font-size: 30px;
text-align: center;
line-height: 100px;
}
.loading .picture span {
display: block;
width: 80px;
height: 80px;
position: absolute;
top: 10px;
left: 10px;
border-radius: 50%;
box-shadow: 0 3px 0 #666;
animation: loading 1s infinite linear;
}
@keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 页面样式start */
.container {
width: 1200px;
margin: 100px auto;
border: 1px solid red;
padding: 20px;
overflow: hidden;
border-radius: 10px;
}
.container .item {
float: left;
margin-bottom: 10px;
}
.container img {
font-size: 0;
vertical-align: middle;
width: 300px;
height: 200px;
}
五、效果图
