# Start image loading when item is in view

**URL:** <https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168>\
**Category:** How-to Discussions\
**Created:** [January 10, 2018, 4:41pm UTC](https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168 "2018-01-10T16:41:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matti\_Tihverainen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/matti_tihverainen/32/684_2.png) [@Matti\_Tihverainen](https://forums.fusetools.com/u/Matti_Tihverainen)\
**Post date:** [January 10, 2018, 4:41pm UTC](https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168/1 "2018-01-10T16:41:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 10, 2018, 4:44pm UTC](https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168/2 "2018-01-10T16:44:33Z")

</div>

Hi Matti,

I though our [endless scroller](https://www.fusetools.com/examples/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.

---

<div class="post-metadata">

**Author:** ![Matti\_Tihverainen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/matti_tihverainen/32/684_2.png) [@Matti\_Tihverainen](https://forums.fusetools.com/u/Matti_Tihverainen)\
**Post date:** [January 10, 2018, 5:38pm UTC](https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168/3 "2018-01-10T17:38:04Z")

</div>

Thanks Uldis!

The Deferred class was the one I was looking for!

---

<div class="post-metadata">

**Author:** ![Matti\_Tihverainen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/matti_tihverainen/32/684_2.png) [@Matti\_Tihverainen](https://forums.fusetools.com/u/Matti_Tihverainen)\
**Post date:** [January 10, 2018, 6:56pm UTC](https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168/4 "2018-01-10T18:56:39Z")

</div>

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:

```auto
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
			});

		}

	}

}

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 10, 2018, 10:47pm UTC](https://forums.fusetools.com/t/start-image-loading-when-item-is-in-view/5168/5 "2018-01-10T22:47:10Z")

</div>

Great stuff! I should mention that there is now a convenience class that will make your life SO much easier: [ScrollViewPager](https://www.fusetools.com/docs/fuse/controls/scrollviewpager).