Results 1 to 3 of 3

Thread: Question on how carousel caches inner elements for optimization

  1. #1
    Sencha User elwhiz's Avatar
    Join Date
    Apr 2009
    Posts
    28
    Vote Rating
    0
      0  

    Default 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 its 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 its 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 Im 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 dont 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 its not the active carousel item.

    Thank you in advance for helping.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    31
    Answers
    1
    Vote Rating
    0
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •