# Wait for image fully loaded and rendered

**URL:** <https://forums.fusetools.com/t/wait-for-image-fully-loaded-and-rendered/1859>\
**Category:** How-to Discussions\
**Created:** [March 24, 2017, 7:01pm UTC](https://forums.fusetools.com/t/wait-for-image-fully-loaded-and-rendered/1859 "2017-03-24T19:01:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [March 24, 2017, 7:01pm UTC](https://forums.fusetools.com/t/wait-for-image-fully-loaded-and-rendered/1859/1 "2017-03-24T19:01:26Z")

</div>

Is it possible to wait for images to be fully loaded and rendered before showing the page/panel?

I’m loading data and images from an API I made. I display both inside a `ScrollView` as in the [News feed example](https://www.fusetools.com/examples/news-feed). The JSON contains the link to the image so I display the images with a simple:

```
<Panel Dock="Left">
    <StackPanel>
        <Image Url="{image}" Width="100" Margin="0,0,10,0" Alignment="TopLeft" CachingMode="Optimized" />
    </StackPanel>
</Panel>

```

As the feeds (or news) are more than 100 it happens that, while the text is dowloaded immediately, the above panel remains empty until is populated with the images.

Is there a way to wait that the `ScrollView` is fully rendered before it is displayed?

---

<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:** [April 25, 2017, 4:48pm UTC](https://forums.fusetools.com/t/wait-for-image-fully-loaded-and-rendered/1859/2 "2017-04-25T16:48:48Z")

</div>

Hi Enrico,

sorry for the delayed response.

I will have to answer your question indirectly, because while there is a solution to the challenge you’re describing, it is not “waiting until `ScrollView` is fully rendered”.

What you should do is create an [optionally animated] placeholders for your list items. You can toggle their visibility with the [WhileBusy trigger](https://www.fusetools.com/docs/fuse/triggers/whilebusy). In your case, a parent node (the list item ux:Class) containing your `Image` tags will be marked as busy for as long as the image is downloading.

You can take a look at our [WhileBusy example](https://www.fusetools.com/examples/while-busy) which employs this exact strategy.

Hope this helps!