Add a Delay when Image is downloading

How-to Discussions
1

Hi There,

I have an image that is being downloaded from internet. as shown below logo is the URL of the image obtained from another mechanism. my problem is that the Stroke get drwan before the image has finished downloading is there a way to add delay and draw only when the image has finished downloading its content. [code]

[/code]

thank you for your prompt answer, kinda stuck here and found no solution so far

Hakim

2

oops somehow portion of code was not displayed:

3

‘’’

‘’’

<Circle Width="64" Height="64" Alignment ="TopCenter" Margin="0,15,0,0">
                                <Stroke Width="2" Brush="#FFF"/>
                                <ImageFill Url="{logo}" />
                            </Circle>
4

Unfortunately the WhileLoading trigger doesn’t work on ImageFill at the moment. I’ve added an issue to get that working. In the meantime I’m going to look for a workaround, since I think there might be one.

5

For now you can bind the ImageFill to a Source used in an invisible Image and watch the loading status there. The sources are shared so the status of one will be the same as the other.

<JavaScript>
    var Observable = require("FuseJS/Observable")

    exports.url = Observable("http://weknowyourdreams.com/images/nature/nature-04.jpg&quot;)

    exports.changeUrl = function() {
        exports.url .value = "http://www.planwallpaper.com/static/images/hd_nature_wallpaper.jpg&quot;
    }
</JavaScript>
<Circle Alignment="Center" Width="200" Height="200" Clicked="{changeUrl}">
    <Stroke Width="5"><SolidColor Color="0,0,0,1" ux:Name="TheColor"/></Stroke>
    <ImageFill Source="BackImage"/>
</Circle>
<Image Visibility="Hidden">
    <HttpImageSource Url="{url}" ux:Name="BackImage"/>
    <WhileLoading>
        <Change TheColor.Color="0,0,0,0"/>
    </WhileLoading>
</Image>

Note: You may notice that when you first start your app you get a black stroke momentarily. This is because we aren’t actually loading an image until the JS variable binding is updated. I have entered appropriate issues to get this sensibly resolved.

6

Let me look into your solution and get back to you, my image link is obtained thru JSON , so hardcoding it in teh observable is not an option for me, but I will see how I can modify your code to suit my needs.

Thank you so much

Hakim

7

Hi There,

My Whole problem was to find a way to hide the circle+stroke while image is downloading, so that it appears only when download is finished. So I guess as you mentionned in your note you got my point.

So for now there is no workaround until this issue is fixed. may be add a finishLoading as opposed to WhileLoading. so we can trigger things as soon as download is done.

Thx for all your help

Hakim