浅析preload.js

在移动端开发H5时，我们难免会要制作H5页面的Loading效果，然后前面一篇给大家介绍了怎样仿真加载loading效果（https://blog.csdn.net/keepyourbelief/article/details/80761286），但是经过我左寻右思，咱们还是踏踏实实的干点有用的事情，拒绝花里胡哨的东西，emmmmmmm,回归正题，下面给大家解析preload.js
PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源
forExample：

图片
css/js文件
音频/视频
数据
其他

它使用了XHR2来提供实时的加载进度信息，如果不支持则使用标签式的简化进度来实现进度展示，支持支持多队列，多连接，暂停队列

在PreloadJS中，LoadQueue是主要用来预加载内容的API，LoadQueue是一个加载管理器即：可以预先加载一个文件或者一个文件队列

初始化加载管理器：（创建队列）

var preload = new createjs.LoadQueue(true);

传递的参数是boolean类型，false则强制使用标签式的加载，LoadQueue支持的相关的文件:

BINARY: XHR调用的二进制文件
TEXT: 文本文件 - 仅支持XHR
CSS: CSS文件
IMAGE: 一般图片文件格式
JAVASCRIPT: JavaScript文件
JSON: JSON数据
XML: XML数据
JSONP: 跨域JSON文件
SOUND: 音频文件
VIDEO: 视频文件
SVG: SVG文件
MANIFEST: JSON格式的文件列表

LoadQueue包含了以下几个常用的监听事件：

complete: 当队列完成加载所有文件时。
error: 当队列与任何文件遇到错误时。
progress: 对于整个队列进展已经改变。
fileload: 单个文件已完成加载。
fileprogress: 单个文件进度变化。注意,只有文件装载XHR(或可能通过插件)将 file 事件进展除了0或100%。

你想添加文件加载使用 loadFile 或添加多个文件使用列表或一个清单定义使用 loadManifest。文件附加到活动队列的末尾，方法有很多种，具体看个人爱好，而我这里使用loadManifest

下面是我的代码清单：

html结构：

<body>
    <div class="loading">
        <div class="progress"></div>
    </div>
    <img src="images/ts.jpg" style="display: none"/>
    <img src="images/ts.jpg" style="display: none"/>
    <img src="images/ts.jpg" style="display: none"/>
    <img src="images/ts.jpg" style="display: none"/>
    <img src="images/ts.jpg" style="display: none"/>
    <img src="images/ts.jpg" style="display: none"/>
    <img src="images/ts.jpg" style="display: none"/>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/preloadjs.js"></script>
</body>

CSS渲染：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .loading {
            display: table;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #00ffb1;
        }
        .loading > .progress {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
</style>

JavaScript代码：

<script>

        var preload;
        var mainfest;

        // 初始化预加载manifest清单
        function setupManifest(){
            mainfest = [
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"},
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"},
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"},
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"},
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"},
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"},
                { src:"images/ts.jpg"} , { src:"images/ts.jpg"}
            ];
        }
        // 预加载函数
        function startPreload() {
            preload = new createjs.LoadQueue(true);
            //注意加载音频文件需要调用如下代码行
            preload.installPlugin(createjs.SOUND);
            //为preloaded添加整个队列变化时展示的进度事件
            preload.addEventListener("progress",handleFileProgress);
            //为preloaded添加当队列完成全部加载后触发事件
            preload.addEventListener("complete",loadComplete);
            //设置最大并发连接数  最大值为10
            preload.setMaxConnections(1);
            preload.loadManifest(mainfest);
        }

        // 当整个队列变化时展示的进度事件的处理函数
        function handleFileProgress(event) {
            $(".progress").text("loading..."+Math.ceil(event.loaded * 100)+ "%");
            console.log(event.loaded);
        }

        // 处理preload添加当队列完成全部加载后触发事件
        function loadComplete() {
            // 设置定时器，当全部加载完毕后让100%停留0.4秒，提高用户体验，不至于让用户感觉不到
            window.setTimeout(()=>{
                $(".loading").remove();
            },400);
        }
        setupManifest();
        startPreload();
 </script>

以上就是一个preload.js插件的基本使用，暂时更新到这里，等以后有了更深的点再更新吧

猜你喜欢