Consider making it easier to pre-load content

[domenic]

Right now, we have a small window of content we render DOM for, which isn't currently visible. This is so that when the user scrolls, there won't be a sudden render flash.

However, there's a related problem where your content may not be downloaded yet---either the content itself, or the resources it requires (e.g. images, iframes, etc.). This generally requires more time than just rendering, because networks are slow. Our current small outside-the-viewport rendering window thus isn't really sufficient.

At a very high level, it would be ideal if there were some way to say:

• The previous/next X items before/after the viewport should get rendered
• The previous/next Y items before/after the viewport should get loaded

Today, you can do this using the rangechange event. Some demos already exist of this sort of preloading, especially for preloading the content itself. This is a bit fiddly to get right, but is possible.

The biggest limitation today though is for cases where you want to preload the resources the content depends on. For example, consider a contact list where each contact has a photo. It's relatively easy to preload the next Y contacts' JSON from the server, using rangechange. But it then requires an extra step to also preload their photos: you have to do something like create an invisible img element, and either reuse that when render-time comes around, or just throw it away but count on the browser's HTTP cache.

I'm not sure what the solution is here, or whether a solution is necessary. But it's a tricky problem space, and I wanted to log it. I think some of the existing virtual scrollers in the ecosystem (including beyond the web) have solutions in this space, which we may want to investigate.