预加载

1. 效果

image.png image.png image.png

2. 原理

• 引入预加载js插件
• 固定插件语法

3. 代码

html

<div class="loading">0%</div>

css

.loading{
    text-align: center;
    font-size: 30px;
    margin-top: 100px;
}

js

<script src="js/preloadjs.min.js"></script>//引入插件
<!--加载图片-->
<script type="text/javascript">
    var loading = document.querySelector(".loading");
    
//语法：
    //实例化一个预加载队列的对象
    var queue = new createjs.LoadQueue();
    //设置加载的资源
    queue.loadManifest([
        {"id":1,"src":"img/1.jpg"},
        {"id":2,"src":"img/2.jpg"},
        {"id":3,"src":"img/3.jpg"},
        {"id":4,"src":"img/4.jpg"},
        {"id":5,"src":"img/5.jpg"},
        {"id":6,"src":"img/6.jpg"},
        {"id":7,"src":"img/7.jpg"},
        {"id":8,"src":"img/8.jpg"},
        {"id":9,"src":"img/9.jpg"},
        {"id":10,"src":"img/10.jpg"}
    ]);
    //加载完成触发
    queue.on("complete",function(res){
        console.log("complete",res);
    });
    //加载资源过程中触发
    queue.on("progress",function(res){
        console.log("progress",res);
        //动态显示加载百分比
        loading.innerHTML = Math.floor(res.progress*100)+"%" ;
    })
</script>

4. 控制台

• console：

  
  image.png

• 为了使得加载过程更加明显，可以减慢浏览器网速：

image.png

Test自定义，可以自行Add个网速100k/s