Image Loading Event

0
votes

I want that when my image is loading then GIF image should be displayed but when image loading is completed then GIF should disappear. But I don't know how to do. Please tell me the step by step procedure.

imageWave1.IsVisible = !imageWave1.IsLoading;
stackBehindImage.IsVisible = true;
imageWave1.IsVisible = true;
stackFrontImage.IsVisible = false;

Second Image is displaying where GIF should be displayed first then until the second image is Loading 

<StackLayout x:Name="stackFrontImage" Padding="0" HeightRequest="100" Spacing="0" Margin="10" IsVisible="True">
                    <ffimageloading:SvgCachedImage HeightRequest="100"
                                               HorizontalOptions="FillAndExpand" 
                                               VerticalOptions="Center" 
                                               Aspect="AspectFill" 
                                               x:Name="imageWave" 
                                               Source="outlet.gif"
                                               IsVisible="True"
                                               Margin="0"/>
                </StackLayout>

                <StackLayout x:Name="stackBehindImage" HeightRequest="100" Padding="0" Spacing="0" Margin="10" IsVisible="False">

                    <ffimageloading:SvgCachedImage x:Name="imageWave1"
                                               HorizontalOptions="FillAndExpand" 
                                               VerticalOptions="Center" 
                                               Aspect="AspectFill" 
                                               HeightRequest="50"
                                               Margin="0"/>

This is my XAML code.

I have written all these things but my both images(GIF and PNG) displaying together. please correct me what I am doing wrong here.

//This should be displayed when my imagewave1.source is Loading.

<StackLayout x:Name="stackFrontImage" Padding="0" HeightRequest="100" Spacing="0" Margin="10" IsVisible="True">
                    <ffimageloading:SvgCachedImage HeightRequest="100"
                                               HorizontalOptions="FillAndExpand" 
                                               VerticalOptions="Center" 
                                               Aspect="AspectFill" 
                                               x:Name="imageWave" 
                                               Source="outlet.gif"
                                               IsVisible="True"    
                                               Margin="0"
                                               LoadingPlaceholder="imageWave1"
                                               Finish="ImageWave_Finish"
                                               DownloadStarted="ImageWave_DownloadStarted"/>
                </StackLayout>

//This Should be displayed after loading itself and then GIF should disappear. 

                <StackLayout x:Name="stackBehindImage" HeightRequest="100" Padding="0" Spacing="0" Margin="10" IsVisible="False">

                    <ffimageloading:SvgCachedImage x:Name="imageWave1"
                                               HorizontalOptions="FillAndExpand" 
                                               VerticalOptions="Center" 
                                               Aspect="AspectFill" 
                                               HeightRequest="100"
                                               Margin="0"
                                               Source="http://192.168.0.110/repos/xformsexperimental/RestApiTrain/images/mcdonalds.png"
                                               LoadingDelay="5"/>


 private void ImageWave_Finish(object sender, FFImageLoading.Forms.CachedImageEvents.FinishEventArgs e)
        {
            stackBehindImage.IsVisible = true;
        }

        private void ImageWave_DownloadStarted(object sender, FFImageLoading.Forms.CachedImageEvents.DownloadStartedEventArgs e)
        {
            stackBehindImage.IsVisible = false;
        }

Here is the screenshot kindly check.

enter image description here

3
xamarinxamarin.forms
How did you load your image? Can you share the code? - nevermore
you can use FFimageloading github.com/luberda-molinet/FFImageLoading. In that you can use any image till your actual image gets load. - MShah
@JackHua-MSFT I am using FFimageloading for loading GIF, I have two images one is GIF and second is PNG but when PNG is loading then GIF should be display and when PNG is loaded successfully then GIF should be disappear and PNG should be display. - Manisha
@JackHua-MSFT I am using FFimageloading to loading GIF image and i have tow images one is GIF and another is PNG but i want that when PNG is loading till then GIF should be display and when PNG is loaded successfully then GIF should be disappear and PNG should be display over that. - Manisha

3 Answers

1
votes

  1. There is an property called LoadingPlaceholder you can use during the loading time of the image.

  2. There are two events called DownloadStarted and Finish Occurs before/after every image loading. You can use these two events to control the visible ability of your second image.

For example:

    <ffimageloadingsvg:SvgCachedImage  HeightRequest="100"
                                       HorizontalOptions="FillAndExpand" 
                                       VerticalOptions="Center" 
                                       Aspect="AspectFill" 
                                       x:Name="imageWave" 
                                       Source="outlet.gif"
                                       IsVisible="True"
                                       Margin="0"
                                       LoadingPlaceholder="imageWave1"
                                       Finish="ImageWave_Finish"
                                       DownloadStarted="ImageWave_DownloadStarted"
                                       />

In code behind:

private void ImageWave_Finish(object sender, FFImageLoading.Forms.CachedImageEvents.FinishEventArgs e)
{
    stackFrontImage.IsVisible = false;
}

private void ImageWave_DownloadStarted(object sender, FFImageLoading.Forms.CachedImageEvents.DownloadStartedEventArgs e)
{
    stackFrontImage.IsVisible = true;
}
0
votes

You should use like this:

<ffimageloading:CachedImage HorizontalOptions="Center" 
                VerticalOptions="Center"
                WidthRequest="300" HeightRequest="300"
                DownsampleToViewSize="true"
                LoadingPlaceholder = "loading.png"
                Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
</ffimageloading:CachedImage>

In this LoadingPlaceholder is what you can show the loading image, once the Source image is loaded it will automatically disappear.

0
votes

try this for loading indicator

<Image x:Name="img" Aspect="AspectFill"  />


<ActivityIndicator BindingContext="{x:Reference img}" IsRunning="{Binding IsLoading}" />