图片加载事件 [英] Image Loading Event

问题描述

我希望当我的图像加载时应该显示 GIF 图像，但是当图像加载完成时 GIF 应该消失.但我不知道该怎么做.请告诉我分步程序.

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;

第二张图片显示在应该先显示 GIF 的地方，然后直到第二张图片正在加载

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"/>

这是我的 XAML 代码.

This is my XAML code.

我写了所有这些东西，但我的两个图像(GIF 和 PNG)显示在一起.请纠正我在这里做错了什么.

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

//这个应该是我的imagewave1.source正在加载的时候显示的.

//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>

//这应该在加载后显示，然后GIF应该消失.

//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.

推荐答案

你应该这样使用:

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

在这个 LoadingPlaceholder 是你可以显示加载图像的内容，一旦 Source 图像被加载它会自动消失.

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

这篇关于图片加载事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！