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

赞 (0)

相关推荐

  • javascript preload&lazy load

    复制代码 代码如下: (function($) { (function($) { $.preload = function(data, cfg) { return new Loader(data, cfg); }; var maps = {}, on = $.event.add, un = $.event.remove, head = document.getElementsByTagName('head')[0], body = document.body, bs = $.browser, i

  • mpvue 页面预加载新增preLoad生命周期的两种方式

    存在的必要性:mpvue开发微信小程序,在页面跳转到新页面的过程中会有200ms左右的延迟,这个200ms如果用来请求新页面的接口,那么跳转到新页面或许已经渲染好了页面. 就是两种方式: 1.新页面跳转之前,就请求新页面数据. 2.跳转到新页面后,再请求数据,可能还会有一个loading的状态. 第二种方式是正常的的页面跳转,不say了. 这里讲解的都是第一种方式: 从上面结构图可以看出系统跳转的延时时间可以用来请求新数据,大大提高了用户体验性. 方案是有了,该怎么实现呢. 我们知道mpvue的

  • Preload基础使用方法详解

    PreloadJS是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源,例如 图片,文件,音频,数据,其他 它使用了XHR2来提供实时的加载进度信息,如果不支持则使用标签式的简化进度来实现进度展示. 支持多队列,多连接,暂停队列等等功能 在PreloadJS中,LoadQueue是主要用来预加载内容的API.LoadQueue是一个加载管理器,可以预先加载一个文件或者一个文件队列. var queue = new createjs.LoadQueue(true); 以上代码

  • 使用preload预加载页面资源时注意事项

    使用preload预加载页面资源时注意事项

    preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行.提供的好处主要是 将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件 提前加载指定资源,不再出现依赖的 font 字体隔了一段时间才刷出 如何使用 preload 使用 link 标签创建 <!-- 使用 link 标签静态标记需要预加载的资源 --> <link rel="preload" href="/path/to/st

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

    一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度 1.实例对象LoadQueue加载队列对象 var queue = new createjs.LoadQueue(false); 2.需要监听常用到的三个方法 //监听进度事件 queue.on("progress", function (e) { }); //监听加载事件 queue.on("fileload", function (e) { }); //监听完成事件 queue.

  • ASP.NET Core中修改配置文件后自动加载新配置的方法详解

    前言 在 ASP.NET Core 默认的应用程序模板中, 配置文件的处理如下面的代码所示: config.AddJsonFile( path: "appsettings.json", optional: true, reloadOnChange: true ); config.AddJsonFile( path: $"appsettings.{env.EnvironmentName}.json", optional: true, reloadOnChange: t

  • vue加载天气组件使用方法详解

    vue加载天气组件使用方法详解

    本文实例为大家分享了vue加载天气组件的使用方法,供大家参考,具体内容如下 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将script引入 修改为vue的动态引入方法 <template> <div id="weater"> <div id="weather-view-he" ref="weather"></div> <remote-scrip

  • Vue使用Three.js加载glTF模型的方法详解

    前言 Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形,基于WebGL实现,对WebGL进行了进一步的封装,简化了多数复杂的接口. Three.js支持包括 .obj..gltf等类型的模型结构.glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的.可扩展的格式,这种格式既高效又与现代web技术高度互操作. obj格式的模型只支持顶点.法线.纹理坐标和基本材质,而glTF模型除上述所有内容外

  • PyTorch加载自己的数据集实例详解

    数据预处理在解决深度学习问题的过程中,往往需要花费大量的时间和精力. 数据处理的质量对训练神经网络来说十分重要,良好的数据处理不仅会加速模型训练, 更会提高模型性能.为解决这一问题,PyTorch提供了几个高效便捷的工具, 以便使用者进行数据处理或增强等操作,同时可通过并行化加速数据加载. 数据集存放大致有以下两种方式: (1)所有数据集放在一个目录下,文件名上附有标签名,数据集存放格式如下: root/cat_dog/cat.01.jpg root/cat_dog/cat.02.jpg ...

  • JS 加载性能Tree Shaking优化详解

    目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

  • BootstrapTable加载按钮功能实例代码详解

    BootstrapTable加载按钮功能实例代码详解

    1      html <!--工具栏--> <div id="toolbar" class="btn-group"> <div style="float:left;margin-right: 10px"> <button class="btn btn-danger"onclick="openModal('add',0,'')">增加</button&g

  • Three.js加载外部模型的教程详解

    1.  首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 2.  创建three.js核心对象 Scene(场景) Camera(相机) Light(光源) Mesh(模型) Renderer(渲染器) 最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera) 3.  OBJ模型的导入 <script type=&quo

  • vue+webpack实现异步加载三种用法示例详解

    1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

  • Vue向下滚动加载更多数据scroll案例详解

    Vue向下滚动加载更多数据scroll案例详解

    vue-infinite-scroll 安装 npm install vue-infinite-scroll --save 尽管官方也推荐了几种载入方式,但"最vue"的方式肯定是在main.js中加入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 实现范例 官方给的代码范例是假设你在根组件写代码,实际上我们肯定是在子组件里写代码,所以代码也需要略作修改,下方只列有用的代码片段: <

随机推荐