一. 使用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加载图片资源的更多相关文章

  1. cocos2dx中加载图片资源的方法,和从内存中获取已经加载的图片资源的方法

    游戏中通常需要将常用的资源如:声音,图片,plist文件,提前加载进内存,以加快游戏的流畅度 1.预加载声音: SimpleAudioEngine::getInstance()->preload ...

  2. web项目加载图片资源

    在web项目中,用户会上传图片,这些图片应该存在服务器硬盘上,而不是存在数据库或者应用程序路径下,在数据库存入文件的路径. 这是一个比较重要的问题,也是开发过程中也解决的问题.当然,我可以跳过,但是成 ...

  3. 使用imageLoader加载图片资源

  4. Android学习笔记之BitmapFactory.Options实现图片资源的加载...

    PS:小项目总算是做完了...历经20多天...素材,设计,以及实现全由自己完成...心力憔悴啊...该写写博客记录一下学习到的东西了... 学习内容: 1.使用BitmapFactory.Optio ...

  5. cocos2d-x中CCTextureCache图片资源的异步加载

    如果没有预先加载图片,则可以通过addImageAsync()函数实现异步加载,该函数通过创建一个加载线程来加载图片,并且在主线程中通过调用回调函数来读取该图片资源纹理.其主要过程如下: 1.创建线程 ...

  6. cocos2d-x中CCTextureCache图片资源的异步加载<转>

    如果没有预先加载图片,则可以通过addImageAsync()函数实现异步加载,该函数通过创建一个加载线程来加载图片,并且在主线程中通过调用回调函数来读取该图片资源纹理.其主要过程如下: 1.创建线程 ...

  7. Cocos Creator学习六：加载/释放图片资源

    1.目的:学习加载图片资源.使用图片资源创建对象以及释放图片资源. 2.注意事项以及主要函数: ①注意事项:使用loadRes函数,资源必须放置在assets下的resources文件夹下(默认没有r ...

  8. js - 预加载+监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...

  9. html中的图像动态加载问题

    首先要说明下文档加载完成是什么概念 一个页面http请求访问时,浏览器会将它的html文件内容请求到本地解析,从窗口打开时开始解析这个document,页面初始的html结构和里面的文字等内容加载完成 ...

随机推荐

  1. 在 Amazon AWS 搭建及部署网站：（三）开发及部署环境

    服务器已经搭建好,网站也开始运行了.那么如何方便地部署代码呢? 最基本的方式,就是使用 SFTP 向网站目录直接部署.这种方法的缺点是版本控制不便,在上传时也无法方便的比较代码变化. 用SVN来部署是 ...

  2. 项目管理者必知：适用于仪表盘项目的7个优秀JavaScript库

    仪表盘是用于目标或业务流程的视觉指示工具,也用于切割杂乱无章的数据,从而分割出要点的重要工具.它可以帮助评估信息并及时做出正确的决定,一款实时可视化的仪表盘通常由图标.测绘图.图形符号以及数据表格等组 ...

  3. Oracle 学习笔记（Windows 环境下安装 + PL/SQL）

    Oracle 安装.PL/SQL 配置使用  前言:因更换机械硬盘为 SSD 固态硬盘装了新 Windows 7 系统,需要重新搭建开发环境,把 Oracle 安装过程和 PL/SQL 配置使用做下笔 ...

  4. WINDOWS批量替换不同文件夹下的相同文件

    今天帮媳妇解决的问题,记录一下,也许以后有用 例子: N个文件夹下有同一个文件(common.php),但是,现在对common.php文件进行了大量修改. 现在想用最新的common.php替换掉所 ...

  5. python - 接口自动化测试 - TestLogin - 登录接口测试用例

    # -*- coding:utf-8 -*- ''' @project: ApiAutoTest @author: Jimmy @file: test_login.py @ide: PyCharm C ...

  6. Leetcode 655.输出二叉树

    输出二叉树 在一个 m*n 的二维字符串数组中输出二叉树,并遵守以下规则: 行数 m 应当等于给定二叉树的高度. 列数 n 应当总是奇数. 根节点的值(以字符串格式给出)应当放在可放置的第一行正中间. ...

  7. python的重重之器（生成器、迭代器、装饰器）

    一.装饰器 1.定义:本质是函数,装饰其他函数就是为其他函数添加附件功能. 2.原则: a.不能修改被装饰的函数的源代码: b.不能修改被装饰的函数的调用方式: 实例: #!/usr/bin/env ...

  8. 【转】log4js在PM2的cluster模式下大坑

    请直接查看原文:https://blog.yourtion.com/fix-log4js-with-pm2-not-work.html 之前一直使用 debug 还有 console.log 去打日志 ...

  9. 优化脚本性能 Optimizing Script Performance

    This page gives some general hints for improving script performance on iOS. 此页面提供了一些一般的技巧,提高了在iOS上的脚 ...

  10. MpLab设置编译文件输出路径

    MpLab设置编译文件输出路径