ionic-img-cache

Ionic directive to cache images or element background images on first load.

This library works with Ionic Framework (v >= 1.0), the supported platforms being:

• Android
• iOS
• Windows Phone 8.1
• Amazon Fire OS

Instalation

• Install

  • Bower bower install --save ionic-img-cache

  • npm npm install --save ionic-img-cache

• Add imgcache.js and ionic-img-cache.min.js files to your app index.html file.

• Install required cordova plugins:

    cordova plugin add cordova-plugin-device
    cordova plugin add cordova-plugin-file-transfer

• Inject as dependency into your app, example:

  angular.module('app', [
      'ionic',
      'ionicImgCache'
    ])

• Edit config.xml file:
  • Add <access origin="*"/>
  • For Android add:

    <access origin="cdvfile://*"/>
    <allow-intent href="cdvfile://*"/>
    <preference name="AndroidPersistentFileLocation" value="Compatibility" />

  • For iOS add <preference name="iosPersistentFileLocation" value="Library"/>

Required cordova plugins:

• Device
• File
• FileTransfer

Usage

Just add ion-img-cache attribute to img tag you want to cache.

Example: Image: <img ion-img-cache ng-src="{{ imagePath }}"/>

Background image: <div ion-img-cache-bg>Element with abckground image set with css or ng-style</div>

Clearing cache:

ionImgCacheSrv.clearCache() - returns promise, so you can chain it with .then and/or .catch.

Unfortunaly there is no way to invalidate single image now.

Options

Caching can be configured via ionicImgCacheProvider, there are available parameters in this provider:

debug

Type: Boolean

Default value: false

Enables ImgCache debug mode.

quota

Type: Number

Default value: 50

Quota for storage size available for cached images in MB.

folder

Type: String

Default value: ion-img-cache

Set name of cached files directory.

Example:

angular.module('app')
  .config(function($ionicImgCacheProvider) {
    // Enable imgCache debugging.
    $ionicImgCacheProvider.debug(true);

    // Set storage size quota to 100 MB.
    $ionicImgCacheProvider.quota(100);
  });