How to properly preload GIF images?

[MouratidisA]

💬 Questions and Help

I'm trying to implement preload for my application's GIF images, but when I use Preload() or PreloadAsync() in my App.cs then all GIFs are distorted.

Am I missing something about preload implementation in my project?

My preload function in App.cs:OnStart()

//Resources with DownSample(width: 100, height: 100)
            var downSampleDimension_100 = 100;
            String[] resourcesForPreload_100 = {           
            "icon1.gif",            
            "icon2.gif",
            "icon3.gif",
            "icon4.gif",
            };

            foreach (string str in resourcesForPreload_100)
            {
                try
                {
                    await ImageService.Instance.LoadCompiledResource((str))                         
                        .DownSample(width: downSampleDimension_100, height: downSampleDimension_100)
                        .CacheKey(str)
                        .Success((info, result) =>
                        {                       
                            Debug.WriteLine($"Preloading finished! Key: {info.CacheKey}");
                        })
                        .PreloadAsync();
                }
                catch (Exception ex)
                {

                    Debug.WriteLine($"PreLoadAssets Exception thrown: {ex.Message}");
                }
            }

To load an image I use Binding an ImageSource property (from my view model) to page.xaml

View Model property:

 SampleImageSource = ImageSource.FromFile("icon1.gif");

Page xaml implementation:

 <ffimageloading:CachedImage  Source="{Binding SampleImageSource }"  Style="{StaticResource TabbedPageFaceImageStyle}"  />

With Style:

<Style x:Key="BaseFFimageLoadingCachedImage" TargetType="ffimageloading:CachedImage">
                <Setter Property="IsOpaque" Value="True"/>
                <Setter Property="RetryDelay" Value="0"/>
                <Setter Property="RetryCount" Value="0"/>
                <Setter Property="RetryDelay" Value="250"/>
                <Setter Property="Aspect" Value="AspectFit"/> 
            </Style>

            <Style x:Key="TabbedPageFaceImageStyle" TargetType="ffimageloading:CachedImage" BasedOn="{StaticResource BaseFFimageLoadingCachedImage}">
                <Setter Property="HeightRequest" Value="200"/>
                <Setter Property="WidthRequest" Value="200"/>
            </Style>

Quality issue

Without Prelaod: With Preload:

When I open my application GIF images take to much time to load (that's why I tried preload) and GIF quality is bad.