资源预加载

[panlinying]

在head里面写入首屏加载的css

(暂时通用这个样式，后续可根据设计的更改采用其他样式)

<style>
  body { background: #fe5b56; }
	.loading {
		position: relative;
		width: 100%;
		height: 100%;
		background: #fe5b56;
	}
	.loading:after {
		content: "";
                display: block;
                position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 1.8rem;
		height: 2.78rem;
		
                /* 咱们用的fis2在模板中加载静态资源时用 {% uri '...' %}的方式**/
		background-image: url({% uri 'mobile:static/game/new-year/img/loading.png' %});
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 300% 100%;
		-webkit-animation-name: load;
		-webkit-animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: steps(1, end);
		animation-name: load;
		animation-duration: 1s;
		animation-fill-mode: both;
		animation-iteration-count: infinite;
		animation-timing-function: steps(1, end);
	}
	@-webkit-keyframes load {
		0%,
		100% {
			background-position: 0 0;
		}
		33% {
			background-position: -1.84rem 0;
		}
		67% {
			background-position: -3.66rem 0;
		}
	}
	@keyframes load {
		0%,
		100% {
			background-position: 0 0;
		}
		33% {
			background-position: -1.84rem 0;
		}
		67% {
			background-position: -3.66rem 0;
		}
	}
</style>

在模板中建立html结构

<div class="loading">
        <!-- 不太重要的声音文件，不需要做预加载的放在这里 -->
	<audio id="music{{music}}" class="music-source" src="/static/mobile/static/game/new-year/audio/{{music}}.mp3" preload="auto" loop="loop"></audio>
</div>
<!-- 页面加载后显示部分写在这里 -->
<div id="wrapper" style="display: none;">
        <!--阿里云获取的动态图片地址，后端渲染到这里，或者渲染到js里获取，这里以渲染到模板里为例.
如果加载的是静态图片 直接在js中设置-->
        {% for img in loadingImags %}
	    <img src="http://activities.upload.zm1v1.com/{{img}}" class="pre-img" style="display: none;">
	{% endfor %}
......
</div>

js部分

// 预加载模块
function () {
var Preloader = function(sources, oncomplete, onload) {
    this.init(sources, oncomplete, onload);
};
Preloader.prototype = {
    init: function(sources, oncomplete, onload) {
        this.sources = sources;
        this.oncomplete = oncomplete;
        this.onload = onload;
        this.images = [];
        this.counter = 0;
    },

    load: function() {
        var self = this;

        this.images = [];
        this.counter = 0;

        for (var i = 0; i < this.sources.length; i++) {
            var im = new Image();
            im.onload = function() {
                self.counter++;
                if (self.onload)
                    self.onload(this.src);
                if (self.counter == self.images.length)
                    self.oncomplete(self.sources);
            };
            im.src = this.sources[i];
            self.images.push(im);
        }
    }
};
function preload(images, complete, load) {
    var loader = new Preloader(images, complete, load);
    loader.load();
    return loader;
}
$(function(){
    var img = document.getElementsByClassName("pre-img");
    var img_src_array = [];
    for (var i=0;i<img.length;i++) {
        img_src_array.push(img[i].src);
    }
    // queue.on("complete", handleComplete, this);
    function handleComplete() {
        $(".loading").hide();
        $("#wrapper").show();
        // createjs.Sound.play("sound");
        $(".music-source")[0].play();
    }
    preload(img_src_array,function(){
        handleComplete();
        console.log("图片加载完毕");
    },function(){
        console.log("图片正在加载");
    });
})

对于声音文件的预加载由于兼容性问题较多，
暂时使用soundjs