Load data into WinJS.Binding.List in background

Question

Hello all,

I have an app which attempts to download a couple thousand images and display them to the user in a grouped listView. Unfortunately, having this many network requests has a severely negative effect on the app's launch time. My solution to this is to load the first 50 images on launch, and load the rest in the background as the app is being used. So, when the first 50 finish loading, I call an asynchronous function which loads the other images and pushes them on my WinJS.Binding.List (the data source for the listView). Unfortunately, instead of going straight to the app page and allowing the user to begin interacting with the app, it waits for the asynchronous function to complete, which doesn't help decrease the launch time at all.

How can I start a background process to load these images?

Answer 1

In your activated event handler are you passing the Promise representing the completion of loading all the items to the "setPromise" function of the event args? If so, it is blocking on that promise completing before considering your application to have started.

Alternatively you could consider implementing a data adapter for the VirtualizedDataSource (http://msdn.microsoft.com/en-us/library/windows/apps/hh701413.aspx) which would page in data as needed.

-josh

Answer 2

You definitely want to use a virtualized data source.

Don't load images that the user may never scroll to!

-Jeff

---

Jeff Sanders (MSFT)

Answer 3

1. You were correct, the asynchronous call was in the setPromise call, so I moved it out of that call. Unfortunately, the launch time is still at an unacceptable level, as the app won't start until the asynchronous call completes. Where should I put the Promise?

2. VirtualizedDataSource seems like the way to go, but I don't understand how I could use it to page in data as needed. I looked at the sample "HTML ListView working with Data Sources", and it detailed how to get data from web services with VirtualizedDataSource, but it doesn't explain how to manipulate how much is shown on the screen. How do I do this?

Answer 4

VirtualizedDataSource seems like the way to go, but I don't understand how I could use it to avoid loading images the user doesn't scroll to. I looked at the sample "HTML ListView working with Data Sources", and it detailed how to get data from web services with VirtualizedDataSource, but it doesn't explain how to manipulate how much is shown on the screen. How do I do this?

Answer 5

Here is a sample and what it means:

<div id="ListItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align:stretch"
                    data-win-control="WinJS.UI.ListView"
                    data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout},
                      loadingBehavior: 'incremental',  
                pagesToLoad: 2,  
                automaticallyLoadPages: true,  
                pagesToLoadThreshold: 1,  
                    }">
                </div>

http://msdn.microsoft.com/en-us/library/windows/apps/br211837.aspx#properties

These all work together if you set incremental for the loading behavior.

http://msdn.microsoft.com/en-us/library/windows/apps/br211835.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/br211839.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh700671.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh700720.aspx

Obviously you would tune these for your particular needs and requirements.

-Jeff

---

Jeff Sanders (MSFT)

Answer 6

Using the incremental loadingBehavior has not decreased the loading time of my app because, while it reduces the amount of info the ListView loads, the real reason my app is slow is because of all the network requests it has to make, not because of the ListView. Is there any way to use VirtualizedDataSource or loadingBehavior to get around this?

Answer 7

Yes,

Listview can be configured to only load a certain amount of data (see my previous post).  The virtual data source will only be queried for the data as ListView needs it.  That is when you will go and fetch what is required in your virtual data source.

-Jeff

---

Jeff Sanders (MSFT)