Best performance - changing data in a scrollview

5 posts, 0 answers
  1. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 01 Jun 2012 Link to this post

    I have an app that was compiled with PhoneGap for Android. It uses a scrollview to display up to 100 items that include both text and graphics. 

    I wrote the code to use xhr to bring the "next" item (page x+1) when you are viewing page x - so performance is pretty good - it generally works well - but when using the app for a while - it sometimes gets "stuck" in the scollview - after displaying the first page of the new "query" result.

    I switch content after a preview using the content method - with something like the following:

                 $("#adBoard").data("kendoMobileScrollView").content(previewStr); 


                 $('#adcounter').text('1');
                 $('#totalads').text(cnt);
                 $("#adBoard").data("kendoMobileScrollView").scrollTo(0);
                  downloadFirst(currRequest, pDiv);

                 // switch to the view of the results

    I wonder if this is an issue of memory consumption that is not released - when using the content() method. Because - doing the same stuff in Chrome on my development machine - it never gets stuck - with the exact same queries.

    The question is - is there possibly a memory issue with this method - and would it be better to dynamically create a new scrollview element and initialize it with the query results after every query?



  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 04 Jun 2012 Link to this post

    Hello Ron,

    The content method does not do anything special apart from setting the html contents of a particular element, and re-calculating the pager. 

    Here is the actual implementation: 

    content: function(html) {
       this.element.children().first().html(html);
       this.dimensions.refresh();
    },

    However, putting up to 100 images in the widget (and scrolling through them) will affect the browser performance for sure. A thing which might help would be to recycle older pages somehow - by replacing them with hollow placeholders, for instance. 

    The other thing which comes to mind (much more complicated, though) is to hide the pager and cycle and dynamically rotate 3 (or maybe 5) items, changing their contents (something like endless scrolling). 

    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 07 Jun 2012 Link to this post

    Thanks.

    The 100 items is not an issue - since these are small images. I also do it properly - I only download the ones that are going to be seen before they are going to be seen - so most of the time we have up to 10 or 15 images in memory.

    I tried to remove all the old items with removeChild() calls for all my pages when changing content - seems to help a little bit. Thanks. I assume that changing the content via the content() method call would have removed the old items anyway, that's why I did not bother doing it explicitly before. 

    Ron.
  5. Vladimir
    Vladimir avatar
    4 posts
    Member since:
    Jan 2013

    Posted 07 Feb 2013 Link to this post

    Hi Petyo

    "The other thing which comes to mind (much more complicated, though) is to hide the pager and cycle and dynamically rotate 3 (or maybe 5) items, changing their contents (something like endless scrolling). "

    Have you any idea how it can be implemented?
  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 07 Feb 2013 Link to this post

    Hi Vladimir,

    We do not feature such example, as it depends to a large extend on the way the application fetches the contents for the pages. If you are interested in receiving such implementation from Telerik, I would suggest to contact our premium services

    Kind regards,

    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready