PDA

View Full Version : How to show default image in the carousel while image sliding in the same carousel?



Rameshlamani
3 Dec 2012, 9:02 PM
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?
View Page Code

Ext.define('SLS.BRND.WEB.view.MYView', {
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
}
}
]
}
]
}
});

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);
}
}

mitchellsimoens
5 Dec 2012, 10:19 AM
So you want to capture the load event of every image in an item? You can create an Image object is JavaScript and that will fire a load event.

Rameshlamani
5 Dec 2012, 8:36 PM
Got solution. Now it was fine as per my requirement.

digeridoo
5 Jan 2013, 5:45 PM
Not sure if this helps you but for my dynamic carousel I set a class under the 'cls' config to have an image that says 'loading...'. This is the default image that appears on each popup of my dynamic carousel. I just define in my css the background image and call it in the carousel on this config item:

cls: 'loadingimages',

:-)