How best to dynamically load content for very large scrollers?

[andyuk]

Hi,

I'm trying to figure out the best way of dynamically adding elements.

One method is to have a

representing each "page" of content and only load the content when it is in view. The problem with this is, if I have, say 200 pages, that will mean the width of the scroller will be 200 * section width. A 3D transform on a scroller of that width will use up a lot of memory, perhaps too much memory than the browser can cope with. In my case it needs to work on mobile, so I don't have that much memory to play with.

Other solutions could be:

• Limit the number of
  elements and move nodes depending of the direction of swiping
• Limit the number of
  elements and move the content within the nodes depending of the direction of swiping
• Limit the number of
  elements and use CSS absolute positioning to move the nodes depending on the direction of swiping

I'm interested to find out if others have come across this problem and what your solutions have been.

Cheers, Andrew

[ghost]

I solved the problem by using the events: reachedstart, reachedend, segmentdidchange and loading my initial sections as [last week, this week, next week] and scrolling to this week (middle) upon initialization.

My sections look like this

Once the reachedstart event is fired, I look at the FIRST

and extract data-week-start, then I subtract 7 days and generate a new

Once the reachedend event is fired, I look at the LAST

and extract data-week-start, then I add 7 days and generate a new

Wait for segmentdidchange to fire and check if there is anything to prepend or append to #sectionwrapper If you are prepending, you will have to set the scroll position to section.width because otherwise it will scroll to the beginning (which is now the prepended section and it will skip the section the user meant to see)