Ionic Image Loading and Caching [v3]

ionic-image-loading-cache

If your app works with some kind of API and needs to display remote images you will most likely end up thinking about caching either your requests or at least the images to improve the performance of your Ionic app.

We’ve previously talked about request caching in this Quick Win, but today we will give another plugin called Ionic Image Loader a try.

The idea behind this plugin is to improve our performance by loading the images inside a background thread using the native file implementation and also caching the images therefore. Let’s see how it works!

Adding the Image Loading Plugin

First of all we create a new app and add the plugin. At the time of writing this there were minor issues with version 5 and the iOS WKWebView, therefore I decided to take a bit older version. Also, we need to manually add the needed Cordova plugins for downloading the file (don’t be scared, the plugin will handle it) and also the according Ionic Native packages.

Are you ready to start learning?

Join the Ionic Academy

Go ahead and run:

Like always we need to include the stuff inside our module and also make sure to load the Ionic Image loader, so go ahead and change your app/app.module.ts to:

Now you are basically ready to use the plugin, but let’s see what else we can configure.

Image Loading Configuration

The following is optional and a lot more can be configured, simply check out the docs for more information on the different settings options.

In our case we replace the standard loading spinner with an Image (the one that’s per default included in a new Ionic app) and also enable the Debug mode for some logging plus the cache time to live as an example.

Therefore, change your app/app.compontent.ts to:

Again, this is optional and could also be changed on the component level and not at the top of the app!

Using the Image Loader

Next comes the view which holds the magic for the image loader: A special element!

With this element, the image source passed to it will be downloaded in a background thread and stored inside your devices app folder. Later, the plugin will automatically detect the stored/cached image and return the URL to that image instead of making an additional request.

We also add some buttons to reload or clear the cache, so for now change your pages/home/home.html to:

Finally we need to feed in some data and therefore we use again the awesome Randomuser API which contains a few images for users.

The additional logic here is just added to show that even after reloading the data (or here the JSON) the app will not make an additional request. The problem here was that each request would return new random data, otherwise you could try it with your own requests and observe the network activity of your app to see what’s going on!

If you want to clear your cache at some point for example when your app user makes a pull to refresh to get fresh data, you can directly call the command on the image loader and all stored files will be removed. However, it might be the case the the browser we are running in is still caching some stuff so be aware of that if you encounter problems.

For our app, simply change the pages/home/home.ts to:

Now you can make a request and the images will be downloaded only once while a preview of the icon is shown!

As we are using a Cordova Plugin for the download of the images, the whole plugin has no effect when we run it with livereload on the device our inside our browser!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share38
Email
38 Shares