forked from thinkpixellab/PxLoader
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PxLoaderImage.js
103 lines (86 loc) · 2.84 KB
/
PxLoaderImage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
// @depends PxLoader.js
/**
* PxLoader plugin to load images
*/
function PxLoaderImage(url, tags, priority) {
var self = this,
loader = null;
this.img = new Image();
this.tags = tags;
this.priority = priority;
var onReadyStateChange = function () {
if (self.img.readyState == 'complete') {
removeEventHandlers();
loader.onLoad(self);
}
};
var onLoad = function() {
removeEventHandlers();
loader.onLoad(self);
};
var onError = function() {
removeEventHandlers();
loader.onError(self);
};
var removeEventHandlers = function() {
self.unbind('load', onLoad);
self.unbind('readystatechange', onReadyStateChange);
self.unbind('error', onError);
};
this.start = function(pxLoader) {
// we need the loader ref so we can notify upon completion
loader = pxLoader;
// NOTE: Must add event listeners before the src is set. We
// also need to use the readystatechange because sometimes
// load doesn't fire when an image is in the cache.
self.bind('load', onLoad);
self.bind('readystatechange', onReadyStateChange);
self.bind('error', onError);
self.img.src = url;
};
// called by PxLoader to check status of image (fallback in case
// the event listeners are not triggered).
this.checkStatus = function() {
if (self.img.complete) {
removeEventHandlers();
loader.onLoad(self);
}
};
// called by PxLoader when it is no longer waiting
this.onTimeout = function() {
removeEventHandlers();
if (self.img.complete) {
loader.onLoad(self);
}
else {
loader.onTimeout(self);
}
};
// returns a name for the resource that can be used in logging
this.getName = function() {
return url;
};
// cross-browser event binding
this.bind = function(eventName, eventHandler) {
if (self.img.addEventListener) {
self.img.addEventListener(eventName, eventHandler, false);
} else if (self.img.attachEvent) {
self.img.attachEvent('on'+eventName, eventHandler);
}
};
// cross-browser event un-binding
this.unbind = function(eventName, eventHandler) {
if (self.img.removeEventListener) {
self.img.removeEventListener(eventName, eventHandler);
} else if (self.img.detachEvent) {
self.img.detachEvent('on'+eventName, eventHandler);
}
};
}
// add a convenience method to PxLoader for adding an image
PxLoader.prototype.addImage = function(url, tags, priority) {
var imageLoader = new PxLoaderImage(url, tags, priority);
this.add(imageLoader);
// return the img element to the caller
return imageLoader.img;
};