84 lines
No EOL
1.9 KiB
JavaScript
84 lines
No EOL
1.9 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.ImageElement <f> Simple image element with loading indication
|
|
@*/
|
|
|
|
Ox.ImageElement = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
height: 0,
|
|
src: '',
|
|
width: 0
|
|
})
|
|
.options(options || {})
|
|
.update({
|
|
height: function() {
|
|
!self.isAuto && setSizes();
|
|
},
|
|
src: loadImage,
|
|
width: function() {
|
|
!self.isAuto && setSizes();
|
|
}
|
|
})
|
|
.addClass('OxImageElement');
|
|
|
|
self.isAuto = !self.options.width && !self.options.height;
|
|
|
|
self.$screen = Ox.LoadingScreen({
|
|
height: self.options.height,
|
|
size: 16,
|
|
width: self.options.width
|
|
})
|
|
.start()
|
|
.appendTo(that);
|
|
|
|
loadImage();
|
|
!self.isAuto && setSizes();
|
|
|
|
function loadImage() {
|
|
if (self.$image) {
|
|
self.$image.off({load: showImage}).remove();
|
|
}
|
|
self.$image = $('<img>')
|
|
.one({
|
|
error: stopLoading,
|
|
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.stop().remove();
|
|
self.$image.appendTo(that);
|
|
}
|
|
|
|
function stopLoading() {
|
|
self.$screen.stop();
|
|
}
|
|
|
|
that.css = function(css) {
|
|
that.$element.css(css);
|
|
self.$screen && self.$screen.css(css);
|
|
self.$image.css(css);
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
}; |