I am working with sencha touch 2 and one of the things I keep on running into is images taking a few seconds to load. Up until they load there is just blank space allocated for the image, fair enough. What I would like to achieve instead is have a activity loader shown until the image has fully loaded. The catch here is that images are actually background images in sencha touch 2, well at least in regards to the image component supplied. Normally, it would be enough to create an image object and when the image fully loads, add the background image (what is shown below). This seems to work alright. However, I would also like to take into account the size transformation taking place by the browser using background-size: contain. I don’t think this possible, but perhaps I’m wrong?
Ext.define('Exp.Img',{
extend: 'Ext.Img',
xtype: 'expimage',
initialize: function() {
this.on({
scope: this,
painted: this.onPainted
});
this.callParent(arguments);
},
onPainted: function() {
this.getEl().setStyle('background-size','contain');
this.getEl().setStyle('background-position','center center');
},
/*
* When the image source changes do this.
*/
updateSrc: function(newSrc) {
var renderElement = this.renderElement;
if (renderElement) {
var me = this , img = new Image(), to;
/*
* Add overlay with activity indicator.
*/
this.mask(null,null,true);
to = setTimeout(function() {
destroy img;
me.mask('Unable to Load Image',true,'');
},10000);
img.onload = function() {
clearTimeout(to);
me.unmask();
renderElement.dom.style.backgroundImage = newSrc ? 'url(' + newSrc + ')' : '';
};
img.src = newSrc;
}
}
});