54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
Ox.ImageElement = function(options, self) {
|
||
|
|
||
|
self = self || {};
|
||
|
var that = Ox.Element({}, self)
|
||
|
.defaults({
|
||
|
height: 0,
|
||
|
src: '',
|
||
|
width: 0
|
||
|
})
|
||
|
.options(options || {})
|
||
|
.update({
|
||
|
height: setSizes,
|
||
|
src: loadImage,
|
||
|
width: setSizes
|
||
|
})
|
||
|
.addClass('OxImageElement');
|
||
|
|
||
|
self.$screen = Ox.LoadingScreen({size: 16}).appendTo(that);
|
||
|
|
||
|
loadImage();
|
||
|
setSizes();
|
||
|
|
||
|
function loadImage() {
|
||
|
if (self.$image) {
|
||
|
self.$image.off({load: showImage}).remove();
|
||
|
}
|
||
|
self.$image = $('<img>')
|
||
|
.one({load: showImage})
|
||
|
.attr({src: self.options.src});
|
||
|
}
|
||
|
|
||
|
function setSizes() {
|
||
|
var css = {
|
||
|
width: self.options.width,
|
||
|
height: self.options.height
|
||
|
};
|
||
|
self.$screen && self.$screen.options(css);
|
||
|
css = Ox.map(css, function(value) {
|
||
|
return value + 'px';
|
||
|
});
|
||
|
that.css(css);
|
||
|
self.$image.css(css);
|
||
|
}
|
||
|
|
||
|
function showImage() {
|
||
|
self.$screen.remove();
|
||
|
self.$image.appendTo(that);
|
||
|
}
|
||
|
|
||
|
return that;
|
||
|
|
||
|
};
|