jquery预加载

下载

使用前请先下载对应的 js 文件

preload

预加载: 提前下载所有用到的资源

.loading {
  border: 2px solid #000;
  border-radius: 30px;
  height: 30px;
  width: 200px;
  position: relative;
  overflow: hidden;
}
.progress {
  width: 0;
  height: 100%;
  /* background: red; */
  background: linear-gradient(45deg, orange, red, blue, yellow, green);
  transition: all 300ms;
}
.number {
  width: 120px;
  height: 100%;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

<div class="loading">
  <div class="progress"></div>
  <div class="number"></div>
</div>
<!-- 预加载:提前下载所有用到的资源 -->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/preload.min.js"></script>
<script>
  //实例化 对象
  var queue = new createjs.LoadQueue();
  //完成事件
  queue.on("complete", function() {
    console.log("complete");
    //跳转到开始页面
  });
  queue.on("progress", function(e) {
    console.log("progress", e.progress * 100 + "%");
    var progress = (e.progress * 100).toFixed(2) + "%";
    $(".progress").css({ width: progress });
    $(".number").html(progress);
  });
  var imgList = [
    { src: "./img/1.jpg" },
    { src: "./img/2.jpg" },
    { src: "./img/3.jpg" },
    { src: "./img/4.jpg" },
    { src: "./img/5.jpg" }
  ];
  queue.loadManifest(imgList);
</script>