网页资源的预加载preloadjs

最新推荐文章于 2024-03-17 09:46:35 发布

干嘛又给我转钱

最新推荐文章于 2024-03-17 09:46:35 发布

阅读量809

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42115928/article/details/105436299

版权

PreloadJS是一个用于资源管理与预加载的类库，适用于加载图片、文件、音频和数据等。创建LoadQueue实例并配置加载项，支持多种文件类型如BINARY、CSS、IMAGE、JAVASCRIPT等。在加载过程中可以监听complete、error、progress等事件。一旦配置完成，启动预加载流程。参考官方API文档以获取更多详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源
例如：图片文件音频数据等等

首先需要引入preloadjs文件
分享一个在线引用的网站:https://www.bootcdn.cn/
preloadjs在线引用地址:<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.js"></script>

下面说说具体的用法(基础):

首先我们需要创建一个实例对象

var preload = new createjs.LoadQueue(true);

创建完成后，配置需要预加载的文件

var mainfest = [
  { src: "/img.jpg" },      //图片
  { src: "/music.mp3" },   //音频
  { src: "/hahaVedio.mp4" },  //视频
  { src: "./jquery.js" },   //js文件
  { src: "./user.json" }  //json文件
];

注：LoadQueue支持相关文件类型如下：

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

接下来配置加载过程中的函数

//加载队列变化时的回调
preload.addEventListener("progress", handleFileProgress);
//加载全部完成时的回调
preload.addEventListener("complete", loadComplete);

function handleFileProgress(){
	console.log('加载完毕其一')
}

function loadComplete(){
	console.log('全体加载完成')
}