Optimizing scrollView for a large number of objects / large sizes

Solar2D Widgets
#1

Hello guys,

I’ve been struggling with optimizing the scrollview performance when having a large number of big pictures to scroll. I’m building something similar to 9gag or fancy app (a similar scrolling behavior).

I’ve tried the following:

  • Turning off object visibility when outside screen and then on again when on screen:

This enhanced a little bit, but not scrolling is still jerky on my S3

  • Putting the objects in a different group when outside screen, and then back to the scrollView when on screen

This works amazing, BUT, every time I perform a scrollView:insert, the scrolling stops, so if the user is trying to scroll quickly, every insert will stop the scrolling - very inconvenient…

Could you help out with ideas, please?

Thanks!

#2

Evaluate the images ahead of time and detect their main color. Draw a rectangle in that color to use as placeholder. Load images only when necessary (when visible or about to become visible) and place on top of that placeholder. Fade in nicely; Material Design has some pointers on how. A brightness transition may look more professional than an alpha transition. When not visible, removeSelf and nil the images. Set FPS to 60.

Corona has not done a few things that would make this easier, such as dispatching events say every 100 ms when scrolling is happening and restoring the deleted endedScroll event that disappeared without explanation*. A big one that Corona staff tells me will happen soon is allowing you to set a scrollview velocity, as you can a tableview. Note velocity is different from friction.

You may want to use a tableview, which of course has its own problems in terms of async image loading.

* A discussion thread from February 2014: http://forums.coronalabs.com/topic/43778-restoring-deleted-scrollview-feature-endedscroll-event/

#3

The velocity is already working in the latest daily builds (already using it).

What do you mean by loading images when necessary? Should I unload them when they’re outside of view? Otherwise, I’m doing everything you suggested…

Thanks again :slight_smile:

#4

Evaluate the images ahead of time and detect their main color. Draw a rectangle in that color to use as placeholder. Load images only when necessary (when visible or about to become visible) and place on top of that placeholder. Fade in nicely; Material Design has some pointers on how. A brightness transition may look more professional than an alpha transition. When not visible, removeSelf and nil the images. Set FPS to 60.

Corona has not done a few things that would make this easier, such as dispatching events say every 100 ms when scrolling is happening and restoring the deleted endedScroll event that disappeared without explanation*. A big one that Corona staff tells me will happen soon is allowing you to set a scrollview velocity, as you can a tableview. Note velocity is different from friction.

You may want to use a tableview, which of course has its own problems in terms of async image loading.

* A discussion thread from February 2014: http://forums.coronalabs.com/topic/43778-restoring-deleted-scrollview-feature-endedscroll-event/

#5

The velocity is already working in the latest daily builds (already using it).

What do you mean by loading images when necessary? Should I unload them when they’re outside of view? Otherwise, I’m doing everything you suggested…

Thanks again :slight_smile: