在移动端开发H5时,我们难免会要制作H5页面的Loading效果,然后前面一篇给大家介绍了怎样仿真加载loading效果(https://blog.csdn.net/keepyourbelief/article/details/80761286),但是经过我左寻右思,咱们还是踏踏实实的干点有用的事情,拒绝花里胡哨的东西,emmmmmmm,回归正题,下面给大家解析preload.js
PreloadJS是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源
forExample:
它使用了XHR2来提供实时的加载进度信息,如果不支持则使用标签式的简化进度来实现进度展示,支持支持多队列,多连接,暂停队列
在PreloadJS中,LoadQueue是主要用来预加载内容的API,LoadQueue是一个加载管理器即:可以预先加载一个文件或者一个文件队列
初始化加载管理器:(创建队列)
var preload = new createjs.LoadQueue(true);
传递的参数是boolean类型,false则强制使用标签式的加载,LoadQueue支持的相关的文件:
LoadQueue包含了以下几个常用的监听事件:
你想添加文件加载使用 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插件的基本使用,暂时更新到这里,等以后有了更深的点再更新吧