使用PreloadJS加载图片资源的基础方法详解
更新时间：2020年02月03日 17:30:57 作者：返回主页百里
PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源简单点儿说就是一个加载插件，它可以做成页面异步加载且顶部会有进度条动画
一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度
1.实例对象LoadQueue加载队列对象
var queue = new createjs.LoadQueue(false);
2.需要监听常用到的三个方法
//监听进度事件
queue.on("progress", function (e) {
});
//监听加载事件
queue.on("fileload", function (e) {
});
//监听完成事件
queue.on("complete", function (e) {
});
3.实现监听进度
html代码:
<h2>loading...<span id="progress">0%</span></h2>
js代码:
//监听进度事件
queue.on("progress", function(e){
var proNum = Math.ceil(e.progress * 100);
$("#progress").html( proNum + "%");
});
4.添加加载资源
//加载单个图片
queue.loadFile("images/arrow.png");
//加载单个图片,带id
queue.loadFile({id: "img1", src:"images/slide3-bg.png"});
//加载多个文件,指定目录下
queue.loadManifest([
"slide1-bg.png",
"slide2-bg.png",
"slide3-bg.png"
], true, "images/");
5.获取加载完的资源
queue.on("fileload", function (e) {
document.body.appendChild(e.result);
});
二:完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PreloadJs加载图片</title>
</head>
<body>
<div id="img"></div>
<h2>loading...<span id="progress">0%</span></h2>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
<script>
var queue = new createjs.LoadQueue(false);
//监听进度事件
queue.on("progress", function(e){
var proNum = Math.ceil(e.progress * 100);
$("#progress").html( proNum + "%");
});
//监听完成事件
queue.on("complete", function(){
console.log("加载完成");
console.log(queue.getResult("img1"));
});
//加载单个图片
queue.loadFile("images/arrow.png");
//加载单个图片,带id
queue.loadFile({id: "img1", src:"images/slide3-bg.png"});
//加载多个文件,指定目录下
queue.loadManifest([
"slide1-bg.png",
"slide2-bg.png",
"slide3-bg.png"
], true, "images/");
queue.on("fileload", function (e) {
document.body.appendChild(e.result);
});
</script>
</body>
</html>
更多关于PreloadJS加载页面资源的相关文章请点击下面的相关链接
相关文章
这篇文章主要为大家以实践示例理解js强缓存协商缓存，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了JS对象创建与继承的汇总梳理，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序 同步请求授权的详解的相关资料,在小程序首次打开的时候，我需要同时请求获取多个权限，由用户逐一授权，这样的需求实现，需要的朋友可以参考下2017-08-08
Flutter刷新组件RefreshIndicator自定义样式demo
这篇文章主要介绍了Flutter刷新组件RefreshIndicator自定义样式demo,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了electron创建新窗口模态框并实现主进程传值给子进程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本文针对埋点系统和监控系统的融合的一点进行简单的介绍与探索，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了JavaScript监测数据类型方法示例全面总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了微信小程序 开发经验整理的相关资料,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了微信小程序富文本渲染引擎的详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-09-09
最新评论