Best performance - changing data in a scrollview

[Ron]

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?

[Petyo]

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

[Ron]

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.

[Vladimir]

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?

[Petyo]

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