Image Loading Event

问题

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.

回答1:

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.

回答2:

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;
}

来源：https://stackoverflow.com/questions/57646042/image-loading-event