1. #1
    Sencha User elwhiz's Avatar
    Join Date
    Apr 2009
    Posts
    28
    Vote Rating
    0
    elwhiz is on a distinguished road

      0  

    Default Unanswered: Question on how carousel caches inner elements for optimization

    Unanswered: Question on how carousel caches inner elements for optimization


    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 20th. 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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Answers
    3500
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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>

    Code:
    new Ext.carousel.Carousel({
        fullscreen : true,
        bufferSize : 2,
        items      : [
            {
                html : 'One'
            },
            {
                html : 'Two'
            },
            {
                html : 'Three'
            },
            {
                html : 'Four'
            },
            {
                html : 'Five'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Answers
    1
    Vote Rating
    0
    pvmagacho is on a distinguished road

      0  

    Default


    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

Thread Participants: 2

Tags for this Thread