Start image loading when item is in view

How-to Discussions
1

Hello! I have a ScrollView with a lot of items (Each) including an image with content coming from an URL. Is it possible to start loading the image only when the user scrolls to this item and it’s in the view? The app hangs the Internet connection while loading all the images on start.

2

Hi Matti,

I though our endless scroller example took care of that.

If this doesn’t help, please share the code for your Each and its nested content, preferably, in a complete, minimal repro.

3

Thanks Uldis!

The Deferred class was the one I was looking for!

4

Actually the Deferred class was not the main thing to solve this, but by adding gradually more items to the visible Observable as we scroll down (I missed that point from the tutorial). This gets triggered when scrolling to the end:

function loadMoreItems() {

	var maximum = Object.keys(visibleItems._values).length+10;

	for (var id = Object.keys(visibleItems._values).length; id < maximum; id++) {

		if (Object.keys(visibleItems._values).length < Object.keys(allItems._values).length) {

			visibleItems.add({
				"image_url": allItems._values[id].image_url
			});

		}

	}

}
5

Great stuff! I should mention that there is now a convenience class that will make your life SO much easier: ScrollViewPager.