百分比形式进度条

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;
}

五、效果图

进度条制作-百分比形式_html