FFImageLoading
FFImageLoading copied to clipboard
Loading gifs freezing
The loading Gif animations are sometimes freezing, requires user to scroll away and back again for them to reload properly.
- Version with issue: 2.4.11.982
- Platform: Android, untested on iOS.
Could you make a repo?
See attached.
For reference the code block in TaskWithSubTasksViewCell.xaml.cs handles the CachedImage on line 240
ContentView image = new ContentView
{
HorizontalOptions = LayoutOptions.Center,
Margin = new Thickness(0, 10, 10, 10),
Content = new CachedImage
{
HorizontalOptions = LayoutOptions.Center,
Source = subTask.ImageURL,
RetryCount = 3,
RetryDelay = TimeSpan.FromSeconds(2).Milliseconds,
ErrorPlaceholder = Application.Current.Resources["BrokenImageIcon"].ToString(),
LoadingPlaceholder = Application.Current.Resources["LoadingGif"].ToString(),
HeightRequest = 180,
WidthRequest = 180,
VerticalOptions = LayoutOptions.Center,
Transformations =
{
new CircleTransformation()
{
BorderHexColor = Color.White.GetHexString(),
BorderSize = 2
}
}
}
};
I have a simarlar issue, I think? When Gifs are displayed on android, it does not transition back to the image after loading. It works fine in iOS. It works correct up to version 2.4.7.944, after that it does not work, from my tests I did, if it helps.
I am using the image as a button, when I touch the image todo an action the loading gif disappears and the correct image is shown.
@LeoJHarris You sample has way to many dependencies. Tried to add it to FFImageLoading's solution and:
Please provide a minimal repo, then I would be able to debug it.
@daniel-luberda okay will do that today and create new sample project
We observe the same behavior on android, FFImageLoading version: 2.4.11.982 The loading gif animation freezes and is not replaced by the actual image.
@LeoJHarris Unluckily, I couldn't add your projects to the FFImageLoading repo (errors). Can you clone this repo and add those projects here? (I need to reference FFImageloading projects instead nuget dependencies to debug it)
Error CS1703: Multiple assemblies with equivalent identity have been imported: '/Library/Frameworks/Mono.framework/External/xbuild-frameworks/MonoAndroid/v1.0/mscorlib.dll
@daniel-luberda sorry I had some little issues with the cloned repo, I was struggling to build the project
I think that my issue is related. https://github.com/luberda-molinet/FFImageLoading/issues/1263 i can reproduce it easily using sfListview horizontally. It works fine on version 2.4.6.92
@daniel-luberda & @LeoJHarris Same here, for example I have this menu and some of them (images - gifs) transition and some others wont.
*Color circles are the Spinners.gif
I have similar issue
I have same issue.
I have same issue.
And i have same issue.
yes, and I have same issue
I've got the same issue
Same issue
the same issue, any solution ??
Same issue here
@daniel-luberda Since the more info needed label is still there, I will describe my current experience: If you set an animated gif as loading placeholder, the gif stops and the image won't be displayed..
This bug occurs only (for my Tests):
- On Android
- If you're loading more than one image (some images are loading, some not)
I also created a sample which you can find here: TestApp - FFImageLoading_1283.zip
And the code snippet (which is in the sample) is here:
<ContentPage.Content>
<Grid ColumnDefinitions="*, *" RowDefinitions="*, *, *, *">
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="0" Grid.Row="0"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="0" Grid.Row="1"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="0" Grid.Row="2"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="0" Grid.Row="3"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="1" Grid.Row="0"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="1" Grid.Row="1"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="1" Grid.Row="2"/>
<ffimageloading:CachedImage Aspect="AspectFill" HeightRequest="500" WidthRequest="500" DownsampleToViewSize="True" LoadingDelay="750" Source="image.jpg" LoadingPlaceholder="loading.gif" Grid.Column="1" Grid.Row="3"/>
</Grid>
</ContentPage.Content>
You can try adding an ActivityIndicator while checking if the image has finished loading using DataTrigger and Binding For example:
<StackLayout Margin="8,0">
<ActivityIndicator Color="Red">
<ActivityIndicator.Triggers>
<DataTrigger TargetType="ActivityIndicator" Binding="{Binding Source={x:Reference image}, Path=IsLoading}" Value="True">
<Setter Property="IsRunning" Value="True"></Setter>
<Setter Property="IsVisible" Value="True"></Setter>
</DataTrigger>
<DataTrigger TargetType="ActivityIndicator" Binding="{Binding Source={x:Reference image}, Path=IsLoading}" Value="False">
<Setter Property="IsRunning" Value="False"></Setter>
<Setter Property="IsVisible" Value="False"></Setter>
</DataTrigger>
</ActivityIndicator.Triggers>
</ActivityIndicator>
<forms:CachedImage FadeAnimationForCachedImages="True" BitmapOptimizations="True" Source="{Binding Path}" DownsampleToViewSize="True" Aspect="Fill" HeightRequest="225" WidthRequest="145" x:Name="image">
</forms:CachedImage>
</StackLayout>