Question on how carousel caches inner elements for optimization

[elwhiz]

Hi,

I have a big application and often times it needs more than 3 carousel items and have a bunch of elements inside of it.

I notice that with ST 2, only 3 carousel inner items are rendered and served as the container for inner elements and it’s reused again if it has more than 3 items.

I also notice that even though it uses 3 carousel items, it renders the inner elements/panels on the dom even though it’s not painted on the screen. I have seen this behavior when I stuff each carousel item with scrollable panels with images. On every carousel item I scroll to the bottom of panel until I reach the last carousel item, say the 20^th. I notice that when I go back, every panel is still scrolled to the bottom. When I also made a network inspection, the images for all the inner panel of the carousel are being loaded even though I’m still on the first carousel item.

I want to know if this is really the case that somewhere in the dom, the inner panel of the carousel items are cached. I also want to know how I can optimize my app to only render and invoke events when the carousel item is active. I don’t want to fire all events at once for the 20 carousel items with inner panels. I also want to have small memory footprint and want to destroy the inner panels when it’s not the active carousel item.

Thank you in advance for helping.

[mitchellsimoens]

There are the <div> elements that are reused so that we can inject the element for the item that is going to take up. You can change the bufferSize config to tell the Carousel how many items it should use. By default it is 1 so you will have 1 on each side of the active item making it have 3 of the cache <div>s. You can set it to 2 and have 5 cache <divs>

new Ext.carousel.Carousel({
    fullscreen : true,
    bufferSize : 2,
    items      : [
        {
            html : 'One'
        },
        {
            html : 'Two'
        },
        {
            html : 'Three'
        },
        {
            html : 'Four'
        },
        {
            html : 'Five'
        }
    ]
});

[pvmagacho]

Hi, I've found this very old post and I have a question.

Using a smaller bufferSize will only affect performance or could it make the carousel not responsive ?

Thanks