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

2024-05-06 15:44:04

字体：大中小

来源：转载

供稿：网友

一. 使用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");//加载单个图片,带idqueue.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基础使用方法详解

下一篇：JavaScript原型继承和原型链原理详解