tutorials

Image Caching using FFImageLoading

writer img alt

Seungkeun Lee

Staff Engineer

When using Internet images in your application, you may worry about slow image loading or load failure caused by network issues. In this scenario, it is a great idea to show the default temporal image until the actual image is successfully loaded and ready to be displayed. Furthermore, reusing image data that has already been downloaded makes images appear quickly.

The FFImageLoading library includes all the features you need to help you to load images quickly and easily.

FFImageLoading: Fast & Furious Image Loading

The FFImageLoading library enables you to load images on Xamarin.iOS, Xamarin.Android, Xamarin.Forms, Xamarin.Mac, Xamarin.Tizen, and Windows (UWP, WinRT).

Features supported on Tizen

  • Configurable disk and memory caching
  • Multiple image views using the same image source (URL, path, resource) use only one bitmap, which is cached in memory (less memory usage)
  • Deduplication of similar download/load requests; that is, if 100 similar requests arrive at same time, then one real loading is performed while the other 99 wait
  • Support for error and loading placeholders
  • Images can be automatically downsampled to specified sizes (less memory usage)
  • SVG support
  • Image loading Fade-In animation support
  • Can retry image downloads using RetryCount, RetryDelay

Get started

Let's use FFImageLoading in your application.

Install the FFImageloading package

nuget.exe

nuget.exe install Xamarin.FFImageLoading.Forms

.NET CLI

dotnet add package Xamarin.FFImageLoading.Forms

Package reference

<PackageReference Include="Xamarin.FFImageLoading.Forms" Version="2.4.11.982" />

Initialize FFImageLoading

To use FFImageLoading, initialize the library for the Tizen platform and set up the various options.

var app = new Program();
Forms.Init(app);
// Initialize FFImageLoading with FormsApplication object
FFImageLoading.Forms.Platform.CachedImageRenderer.Init(app);

Setup options on startup time

To handle events from CachedImage object in your app code, set the ExecuteCallbacksOnUIThread property to true.

protected override void OnCreate()
{
    base.OnCreate();
    var config = new FFImageLoading.Config.Configuration
    {
        ExecuteCallbacksOnUIThread = true,
    };
    FFImageLoading.ImageService.Instance.Initialize(config);
    LoadApplication(new App());
}

CachedImage

CachedImage provides a main functionality of FFImageLoading. A usage is very similar to the original Image class of Xamarin.Forms.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             x:Class="CachedImageSample.MainPage">
    <ContentPage.Content>
        <StackLayout>
            <ff:CachedImage LoadingPlaceholder="loading.jpg"
             Source="http://i.imgur.com/gkVgpL1.jpg"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage> 
var image = new CachedImage
{
    LoadingPlaceholder = "loading.jpg",
    Source = "http://i.imgur.com/gkVgpL1.jpg"
};

Useful properties

Property Description
Loading
Placeholder
If set, a loading placeholder appears while loading. It supports UriImageSource, FileImageSource, and StreamImageSource.
Error
Placeholder
If set, an error placeholder appears when an error occurs while loading the image. It supports UriImageSource, FileImageSource, and StreamImageSource.
RetryCount (integer, default: 3) If an image download fails or some other error occurs, it can be automatically retried. Defines number of retries.
RetryDelay (integer, default: 250) If an image download fails or some other error occurs, it can be automatically retried. Defines delay between retries.
CacheDuration (Timespan, default: TimeSpan.FromDays(90)) Defines how long, in days, the file cache of the downloaded image is valid.

Clear cache on the memory and disk

If there is not enough memory on a device, you need to suppress memory usage in your app. FFImageLoading provides a way to clear cache on the memory.

// Provided in `CoreApplication`, it is the best place to clear memory cache
protected override void OnLowMemory(LowMemoryEventArgs e)
{
    FFImageLoading.ImageService.Instance.InvalidateMemoryCache();
}

You can also clear cache on the disk:

FFImageLoading.ImageService.Instance.InvalidateDiskCacheAsync();

Best practices for CachedImage use

CachedImage works best when it is used in CollectionView, because CollectionView unloads a view that is out of sight and reloads when it comes back into view. Once the image source is loaded, it appears very quickly.

Privileges

If an image from the Internet does not appear, check that your app has internet privilege.

In the tizen-manifest.xml file:

  • To access the Internet, declare http://tizen.org/privilege/internet

Using FFImageLoading helps ease your worries about using Internet images. Try it today for a simple and successful image downloading experience.

Links