使用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加载页面资源的相关文章请点击下面的相关链接

您可能感兴趣的文章:

Preload

微信小程序 swiper组件详解及实例代码
这篇文章主要介绍了微信小程序 swiper组件详解及实例代码的相关资料,需要的朋友可以参考下
2016-10-10
前端 JavaScript运行原理
这篇文章主要介绍了前端 JavaScript运行原理，JavaScript引擎是一个计算机程序，它的主要作用是JavaScript运行时将源码编译为机器码。每个主流Web浏览器都有自己的JavaScript引擎，它通常由web浏览器供应商开发，接下来一起来看看文章的详细内容吧
2021-10-10
javascript 动态添加表格行
javascript 动态添加表格行...
2006-06-06
uniapp自定义相机实现示例详解
这篇文章主要为大家介绍了uniapp自定义相机实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
10分钟内讲解Npm脚本使用教程
这篇文章主要为大家介绍了10分钟内讲解Npm脚本使用教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
前端面试必会网络跨域问题解决方法
这篇文章主要为大家介绍了前端面试必会的网络跨域问题解决方法讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
await vs return vs return await关键区别
这篇文章主要为大家介绍了await vs return vs return await关键区别解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
微信小程序 Nginx环境配置详细介绍
这篇文章主要介绍了微信小程序 Nginx环境配置详细介绍的相关资料,需要的朋友可以参考下
2017-02-02
微信小程序实现多个按钮toggle功能的实例
这篇文章主要介绍了微信小程序实现多个按钮toggle功能的实例的相关资料,需要的朋友可以参考下
2017-06-06
让chatGPT教你如何使用taro创建mbox
这篇文章主要为大家介绍了让chatGPT教你如何使用taro创建mbox实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03