preload.js最近刚好用上,稳得一(预加载图片、音频、视频)

   之前做项目里面的资源太多,老是有图片没加载出来被人投诉,之前也写过图片预加载感觉还是很不稳,况且只能加载图片,我最近的项目有视频、音频和图片,然后我导师推荐我用preload.js,直接来代码呐,老弟

  

先把库搞下来,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的话

0 %

这个很好用,大家可以多点琢磨官网的api

你可能感兴趣的:(js)