HTML5开发有时需要实现自定义事件,如预加载图片需要知道加载进度事件,本篇以图片预加载功能为例,介绍如何实现自定义事件。
下面的ImgsLoader工具类,可以实现多图片预加载。
<script src="ImgsLoader.js"></script>
然后将图片路径放到一个数组imgs中,然后调用load(imgs)方法即可,如
var imgs = [
"images/dunny.png",
"images/fatcap.png",
"images/piggy.png"
];
var loader = new ImgsLoader();
loader.on("EVENT_COMPLETE", eventHandler);
loader.on("EVENT_PROGRESS", eventHandler);
loader.on("EVENT_ERROR", eventHandler);
loader.load(imgs);
工具类loader有三个监听事件,分别是加载完成,加载进度和加载失败监听,eventHandler是监听回调函数,回调中会包含一个回调对象,如
function eventHandler(resp) {}
resp即是回调对象,包含了type属性和target属性。通过获取这两个属性值即可知道回调的事件和结果。
ImgsLoader.js的源码如下:
function ImgsLoader() {
//基本参数
this.images = new Object(); // 返回的数据对象
this.imageCount = 0; // 已加载计数器
this.imageTotal = 0; // 需加载总量
//事件名称及事件容器
this.EVENT_COMPLETE = "EVENT_COMPLETE";
this.EVENT_PROGRESS = "EVENT_PROGRESS";
this.EVENT_ERROR = "EVENT_ERROR";
this.eventTarget = new Object();
}
ImgsLoader.prototype.load = function(imgList) {
this.imageTotal = imgList.length;
for(var i = 0; i < this.imageTotal; i++) {
var url = imgList[i];
var img = new Image();
this.images[url] = img;
img.onload = this.SingleIMGLoadedHandle.bind(this);
img.onerror = this.SingleIMGErrorHandle.bind(this);
img.src = url;
}
}
ImgsLoader.prototype.on = function(ename, callback) {
//存储需要监听的事件名称和回调函数
this.eventTarget[ename] = callback;
};
ImgsLoader.prototype.trigger = function(event, paramet) {
//事件触发
for(var i in this.eventTarget) {
var ename = i;
var callback = this.eventTarget[i];
if(ename == event) {
callback(paramet);
break;
}
}
};
ImgsLoader.prototype.SingleIMGLoadedHandle = function(evt) {
this.imageCount++;
this.response = {};
this.response.target = {};
if(this.imageCount >= this.imageTotal) {
// 抛出 100% 进度事件
this.response.type = this.EVENT_PROGRESS;
this.response.target.msg = "加载中!";
this.response.target.data = 1;
this.trigger(this.EVENT_PROGRESS, this.response);
// 抛出加载成功事件
this.response.type = this.EVENT_COMPLETE;
this.response.target.msg = "加载成功!";
this.response.target.data = this.images;
this.trigger(this.EVENT_COMPLETE, this.response);
} else {
this.response.type = this.EVENT_PROGRESS;
this.response.target.msg = "加载中!";
this.response.target.data = this.imageCount / this.imageTotal;
this.trigger(this.EVENT_PROGRESS, this.response);
}
};
ImgsLoader.prototype.SingleIMGErrorHandle = function(evt) {
// 抛出加载失败事件
this.response = {};
this.response.target = {};
this.response.type = this.EVENT_ERROR;
this.response.target.msg = "加载失败!";
this.response.target.data = evt.target.src;
this.trigger(this.EVENT_ERROR, this.response);
};
调用测试的完整源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="ImgsLoader.js"></script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid black; background-color: beige;"></canvas>
<script>
var imgs = [
"images/dunny.png",
"images/fatcap.png",
"images/piggy.png"
];
var loader = new ImgsLoader();
loader.on("EVENT_COMPLETE", eventHandler);
loader.on("EVENT_PROGRESS", eventHandler);
loader.on("EVENT_ERROR", eventHandler);
loader.load(imgs);
function eventHandler(resp) {
var type = resp.type;
switch(type) {
case "EVENT_COMPLETE":
console.log("加载成功!");
var imgList = resp.target.data;
var img = imgList["images/fatcap.png"];
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pointX = ctx.canvas.width / 2 - (img.width / 2);
var pointY = ctx.canvas.height / 2 - (img.height / 2);
ctx.drawImage(img, pointX, pointY);
break;
case "EVENT_PROGRESS":
var progress = Math.round(resp.target.data * 100);
console.log("当前进度是:" + progress + "%");
break;
case "EVENT_ERROR":
var errorPath = resp.target.data;
console.log("该图片加载错误:" + errorPath);
break;
}
}
</script>
</body>
</html>
运行结果如图所示: