https://jlharchitect.com/lib/pxloader/PxLoaderImage.js?c=1

1// @depends PxLoader.js
2/**
3 * PxLoader plugin to load images
4 */
5
6function PxLoaderImage(url, tags, priority) {
7    var self = this,
8        loader = null;
9
10    this.img = new Image();
11    this.tags = tags;
12    this.priority = priority;
13
14    var onReadyStateChange = function() {
15        if (self.img.readyState == 'complete') {
16            removeEventHandlers();
17            loader.onLoad(self);
18        }
19    };
20
21    var onLoad = function() {
22        removeEventHandlers();
23        loader.onLoad(self);
24    };
25
26    var onError = function() {
27        removeEventHandlers();
28        loader.onError(self);
29    };
30
31    var removeEventHandlers = function() {
32        self.unbind('load', onLoad);
33        self.unbind('readystatechange', onReadyStateChange);
34        self.unbind('error', onError);
35    };
36
37    this.start = function(pxLoader) {
38        // we need the loader ref so we can notify upon completion
39        loader = pxLoader;
40
41        // NOTE: Must add event listeners before the src is set. We
42        // also need to use the readystatechange because sometimes
43        // load doesn't fire when an image is in the cache.
44        self.bind('load', onLoad);
45        self.bind('readystatechange', onReadyStateChange);
46        self.bind('error', onError);
47
48        self.img.src = url;
49    };
50

51    // called by PxLoader to check status of image (fallback in case
52    // the event listeners are not triggered).
53    this.checkStatus = function() {
54        if (self.img.complete) {
55            removeEventHandlers();
56            loader.onLoad(self);
57        }
58    };
59
60    // called by PxLoader when it is no longer waiting
61    this.onTimeout = function() {
62        removeEventHandlers();
63        if (self.img.complete) {
64            loader.onLoad(self);
65        } else {
66            loader.onTimeout(self);
67        }
68    };
69
70    // returns a name for the resource that can be used in logging
71    this.getName = function() {
72        return url;
73    };
74
75    // cross-browser event binding
76    this.bind = function(eventName, eventHandler) {
77        if (self.img.addEventListener) {
78            self.img.addEventListener(eventName, eventHandler, false);
79        } else if (self.img.attachEvent) {
80            self.img.attachEvent('on' + eventName, eventHandler);
81        }
82    };
83
84    // cross-browser event un-binding
85    this.unbind = function(eventName, eventHandler) {
86        if (self.img.removeEventListener) {
87            self.img.removeEventListener(eventName, eventHandler, false);
88        } else if (self.img.detachEvent) {
89            self.img.detachEvent('on' + eventName, eventHandler);
90        }
91    };
92
93}
94
95// add a convenience method to PxLoader for adding an image
96PxLoader.prototype.addImage = function(url, tags, priority) {
97    var imageLoader = new PxLoaderImage(url, tags, priority);
98    this.add(imageLoader);
99
100    // return the img element to the caller
101    return imageLoader.img;
102};