HI I have done application using Sencha touch2. In carousel we were binding the images dynamically from the web service at the controller level. When we move/slide the images in carousel, next images are taking time to load/show in the carousel. If it takes time to load original image that time it will show default load mask on the carousel. As per our requirement we need to show default image in carousel if it takes time to load original images while sliding the carousel. Once original image is loaded no need to show the default image obviously load mask also will go. Can anyone tell me how to achieve this one Sencha touch2?
My View page Code:
Ext.define('SLS.BRND.WEB.view.ProjectsView', {
extend: 'Ext.Panel',
requires: [
'Ext.Carousel'
],
id: 'projectprofile',
xtype: "projectspage",
config: {
autoDestroy: true,
fullscreen: true,
layout: {
type: 'vbox'
},
items: [{
xtype: 'panel',
layout: 'fit',
flex: Ext.os.is.Phone ? 5 : 5,
items: [{
xtype: 'carousel',
direction: 'horizontal',
directionLock: true,
id: 'ImgId',
flex: Ext.os.is.Phone ? 5 : 5,
config: {
fullscreen: true
}
}]
}]
}
});
My Controller Page Code:
var retrievedObject = localStorage.getItem('ProjectDetails');
jsonObj = Ext.decode(retrievedObject);
var cmp = Ext.getCmp('ImgId');
if (jsonObj != null) {
if (jsonObj != null) {
var itemsoverlay = [];
if (jsonObj.ProjectMainGalleryRoyalGardenia != null) {
for (var i = 0; i < jsonObj.ProjectMainGalleryRoyalGardenia.length; i++) {
var imgURL = jsonObj.ProjectMainGalleryRoyalGardenia[i].ImageUrl;
var senchaIoProjectImageURL = imgURL;
var senchabigImage = imgURL;
var images = [{ url: senchaIoProjectImageURL, bigUrl: senchabigImage}]
Ext.each(images, function (picture) {
var img = picture.url;
var bigImg = picture.bigUrl;
itemsoverlay.push({
xtype: 'label',
html: '<div style="width:' + window.innerWidth + 'px;height:' + SLS.BRND.WEB.Common.Constants.carouselCanvasHeight + 'px;"><img src=' + img + ' style="width:100%;height:100%"/></div>'
});
});
}
}
cmp.setItems(itemsoverlay);
cmp.setActiveItem(0);
}
}
Once quick solution I can see is adding a CSS class to the div that contains the picture like :
Then create the relevant CSS class in your CSS files :
Here I just converted a placeholder image to Base 64 data and added it as a background-image of the div. This way you’re default image will be there before the real picture loads.
You can easily remove the default picture after the real picture has loaded by removing the myDiv CSS class from the div.
Hope this helps