js-createjs-图片预加载方式

引入createjs-js

<script type="text/javascript" src="https://gumballs.leiting.com/mobile/20161208/js/preloadjs.js"></script>

js预加载方法

//图片预加载
var queue = new createjs.LoadQueue();
queue.on("progress", function(e) {
	//加载中的进度
	$(".loding_time").html(parseInt(e.progress * 100) + '%');
}, this);
queue.on("complete", function(e) {
	//加载完成执行操作
	$(".loading").addClass('hide');
}, this);
queue.loadManifest([
	//加载图片，不包括后台的
	'images/award.png','images/bg1.jpg','images/bg2.jpg','images/bg3.jpg','images/bottom_tip.png','images/btn_know.png','images/copy_line.png',
	'images/loading.jpg','images/logo.png','images/main3.png','images/pic.png','images/pop_bg1.png','images/pop_bg2.png','images/pop.png',
	'images/role3.png','images/slogan_game.png','images/slogan_start.png','images/slogan.png','images/sp_bg.png','images/sprite.png','images/sprite2.png'
	,'images/word1.png','images/word2.png','images/pop_close.png'
]);

html部分

<div class="loading pa">
	<div class="loading_slogan pa"></div>
	<p class="loading_w pa">loading<span class="loding_time"></span></p>
</div>

css部分

.loading{
	width:7.5rem;
	height:100%;
	background: url(../images/loading.jpg) 50% 0 no-repeat;
	background-size:cover;
	left: 0;
	top: 0;
	z-index: 200;
}
.loading_slogan{
	width:4.97rem;
	height:.96rem;
	background: url(../images/slogan_start.png) no-repeat;
	background-size:100% 100%;
	left:50%;
	top: 50%;
	margin:-1rem 0 0 -2.48rem ;
}
.loading_w{
	width: 100%;
	line-height: .42rem;
	left:0;
	top: 50%;
	margin-top:.2rem;
	text-align: center;
	font-size: .36rem;
	color: #ffffff;
}
.loding_time{
	margin-left: .2rem;
}