使用PreloadJS加载图片资源的基础方法详解


Posted in Javascript onFebruary 03, 2020

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

Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
一些实用性较高的js方法
Apr 19 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
使用preload预加载页面资源时注意事项
Feb 03 #Javascript
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 #Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 #Javascript
微信小程序实现同时上传多张图片
Feb 03 #Javascript
解决小程序无法触发SESSION问题
Feb 03 #Javascript
vue组件创建的三种方式小结
Feb 03 #Javascript
You might like
PHP 中执行排序与 MySQL 中排序
2009/04/21 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
深入理解redux之compose的具体应用
2020/01/12 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python 处理图片像素点的实例
2019/01/08 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
《菜园里》教学反思
2014/04/17 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
教师考核表个人总结
2015/02/12 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
浅析MongoDB之安全认证
2021/06/26 MongoDB
java设计模式--七大原则详解
2021/07/21 Java/Android
如何利用golang运用mysql数据库
2022/03/13 Golang
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android