js预加载资源,并展示加载进度

之前经常看到有人做的页面加载前先有一个加载过程,并且动态展示加载的百分比,查了一下,发现利用了一个CreateJS,CreateJS中的PreloadJS可以实现效果。

先附上CreateJS的官网:

官网:https://createjs.com/

中文官网:http://createjs.cc/

下面附上一个简单源码,备注:由于引用的资源都是本地的,所以想要跑case,需要替换成自己的本地资源哦,比如creatsjs,还有那些预加载的图片。

<html>
<head>
	<title>createJs</title>
	<meta charset="utf-8" />
	<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
	<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
	<meta HTTP-EQUIV="expires" CONTENT="0">
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Expires" content="-1" />
	<meta http-equiv="pragram" content="no-cache" />

	<script type="text/javascript" src="creatsjs.js"></script>
	<style type="text/css">
		.done{
			display: none;
		}
	</style>
</head>
<body>
	<p class="process">加载进度<span></span></p>
	<p class="done">加载完成</p>
<script type="text/javascript">
	var manifest = [
		{src:"./bigData/0001.jpg",id:"img0001"},
		{src:"./bigData/0002.jpg",id:"img0002"},
		{src:"./bigData/0003.jpg",id:"img0003"},
		{src:"./bigData/0004.jpg",id:"img0004"},
		{src:"./bigData/0005.jpg",id:"img0005"},
		{src:"./bigData/0006.jpg",id:"img0006"},
		{src:"./bigData/0007.jpg",id:"img0007"},
		{src:"./bigData/0008.jpg",id:"img0008"},
		{src:"./bigData/0009.jpg",id:"img0009"},
		{src:"./bigData/0010.jpg",id:"img0002"},
		{src:"./bigData/0011.jpg",id:"img0011"},
		{src:"./bigData/0012.jpg",id:"img0012"},
		{src:"./bigData/0013.jpg",id:"img0013"},
		{src:"./bigData/0014.jpg",id:"img0014"},
		{src:"./bigData/0015.jpg",id:"img0015"},
		{src:"./bigData/0016.jpg",id:"img0016"},
	]
	var loader = new createjs.LoadQueue(true);
	loader.on("progress", handleFileLoad);
	loader.on("complete", handleComplete);
	loader.loadManifest(manifest);
	function handleFileLoad(e){
		var bnum=parseInt(loader.progress*100);
		document.querySelector('.process span').innerText = bnum+'%';
	}
	function handleComplete(){
		alert('done');
	}
</script>
</body>
</html>

最后再说一下,creatsjs功能挺强大的,有时间和兴趣的可以深入研究!!

感谢看完指鹤文章,希望指鹤的文章对您有所帮助。

闲暇时,指鹤喜欢写一些文章,部分发表在了豆瓣,若是您对此感兴趣,您可以点击下面连接支持下指鹤,指鹤在此表示感谢了

绝命笔记 一封匿名信引发的追寻 迷案追凶 量子危机