图片加载完执行函数，图片加载进度_函数功能:给图片资源加载图片-优快云博客

本文介绍了一种方法，通过代码实现图片加载完成后执行特定函数，并详细说明了如何跟踪图片加载进度。在使用时，只需将图片资源放入指定数组，保持原有页面逻辑不变。当所有资源加载完毕，可通过隐藏特定层来完成页面展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.代码

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<!-- 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 -->
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
		<!-- iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览 -->
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<!-- iphone的私有标签，它指定的iphone中safari顶端的状态条的样式 -->
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<!-- ipone的私有标签，忽略将页面中的数字识别为电话号码 -->
		<meta content="telephone=no" name="format-detection" />
		<!-- 禁止Android自动识别页面中的邮件地址   -->
		<meta content="email=no" name="format-detection" />
		<title>脑回路设计有限公司</title>
	</head>
	<body>
		<div class="page loading">
			<div class="loading-cont">
				<div class="loading-head">
					<p></p>
				</div>
				<p class="percent">0%</p>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
		<script>
			/**
			 * 1.对于n可以清除图片的缓存；
			 * 2.创建一个img对象，把所有需要加载得图片，预先加载一遍，这样在使用时，图片就加载好了，就不会出现一张大图，上半扎显示了，下半扎是白的情况了；
			 * 3.在window.onload中，保证所有的图片资源全部加载完毕；
			 * 4.图片资源不会加载两次；
			 * **/
			var n = "?2",
				imgindex = 0,
				baseUrl = 'images/'
			window.onload = function() {
				loadImage(imgindex);
			};
			var fileList = [
				baseUrl + 'bg.jpg' + n,
				baseUrl + 'postbg.jpg' + '?5',
				baseUrl + 'video_end.jpg' + n,
				baseUrl + 'p1_1.png' + n,
				baseUrl + 'p1_2.png' + n,
				baseUrl + 'p1_3.png' + n,
				baseUrl + 'p1_4.png' + n,
				baseUrl + 'p1_5.png' + n,
				baseUrl + 'p1_6.png' + n,
				baseUrl + 'p1_7.png' + n,
				baseUrl + 'p5_cd.gif' + n,
				baseUrl + 'end_back.png' + n,
				baseUrl + 'end_show.png' + n,
				baseUrl + 'p1_head.png' + n,
				baseUrl + 'p1_head_cd.png' + n,
				baseUrl + 'p2_head1.png' + n,
				baseUrl + 'p2_head2.png' + n,
				baseUrl + 'p2_head3.png' + n,
				baseUrl + 'p2_head4.png' + n,
				baseUrl + 'p2_head5.png' + n,
				baseUrl + 'p2_head6.png' + n,
				baseUrl + 'p2_mid.png' + n,
				baseUrl + 'p2_pop1.png' + n,
				baseUrl + 'p2_pop2.png' + n,
				baseUrl + 'p2_rounds.png' + n,
				baseUrl + 'p2_text.png' + n,
				baseUrl + 'p2_head1_g.png' + n,
				baseUrl + 'p2_head2_g.png' + n,
				baseUrl + 'p2_head3_g.png' + n,
				baseUrl + 'p2_head4_g.png' + n,
				baseUrl + 'p2_head5_g.png' + n,
				baseUrl + 'p2_mid.png' + n,
				baseUrl + 'p2_pop1.png' + n,
				baseUrl + 'p2_pop2.png' + n,
				baseUrl + 'p2_rounds.png' + n,
				baseUrl + 'p2_text.png' + n,
				baseUrl + 'p3_input.png' + n,
				baseUrl + 'p4_backbtn.png' + n,
				baseUrl + 'p4_savetip.png' + n,
				baseUrl + 'p5_cd.png' + n,
				baseUrl + 'p5_cube1.png' + n,
				baseUrl + 'p5_cube2.png' + n,
				baseUrl + 'p5_head.png' + n,
				baseUrl + 'p5_text.png' + n,
				baseUrl + 'p5_title.png' + n
			];

			function loadImage(imgIndex) {
				var img = new Image();
				img.src = fileList[imgIndex];
				var percent = parseInt(imgIndex / fileList.length * 100);
				img.onload = function() {
					imgIndex++;
					$(".percent").html(percent + "%");
					if(imgIndex < fileList.length) {
						loadImage(imgIndex);
					} else {
						$(".percent").html("100%");
						console.log('加载完成')
					}
				};
			}
		</script>
	</body>
</html>

2.效果