之前做项目里面的资源太多,老是有图片没加载出来被人投诉,之前也写过图片预加载感觉还是很不稳,况且只能加载图片,我最近的项目有视频、音频和图片,然后我导师推荐我用preload.js,直接来代码呐,老弟
<script src="./lib/preloadjs.min.js"></script>
先把库搞下来,http://www.createjs.cc/preloadjs/,然后上js
var mainfest = [
{ src: "img/loading.gif" },
{ src: "img/background.png" },
{ src: "img/bg_repeat.jpg" },
// 音频
{ src: "./music/loop.mp3",id:'loop' },
// 视频
{ src: "./video/video_01.mp4",id:'myVideo' }
];
var preload = {
// 预加载函数
startPreload: function () {
var preload = new createjs.LoadQueue(true);
//为preloaded添加整个队列变化时展示的进度事件
preload.addEventListener("progress", this.handleFileProgress);
//注意加载音频文件需要调用如下代码行
preload.installPlugin(createjs.SOUND);
//为preloaded添加当队列完成全部加载后触发事件
preload.addEventListener("complete", this.loadComplete);
//设置最大并发连接数 最大值为10
preload.setMaxConnections(1);
preload.loadManifest(mainfest);
},
// 当整个队列变化时展示的进度事件的处理函数
handleFileProgress: function (event) {
$(".percent").text('loading...' + Math.ceil(event.loaded * 100) + "%");
},
// 处理preload添加当队列完成全部加载后触发事件
loadComplete: function () {
shuangjie.$pageLoad.addClass('hide').next().removeClass('hide')
}
}
preload.startPreload();
为啥我在资源那里加上id呢,是方便我调用的,比如我要使用音频的时候,createjs.Sound.play(‘loop’),播放那段音频,不过这又得引入soundjs这个库了,这里就不多说了,html的话
<div class="loading-wrap center">
<img class="load-gif" src="./img/loading.gif" alt="" />
<span class="percent">0 %</span>
</div>
这个很好用,大家可以多点琢磨官网的api