Ionic Img Cache

Ionic Img Cache

Image caching directive using imagecache.js library.

$0.00

Vitaliy Bobrov

Vitaliy Bobrov

Member since 2014

Details

Version:
1.0.3
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
,

ionic-img-cache

Bower versionnpm version

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:

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

  • Edit config.xml file:
    • Add <access origin="*"/>
    • For Android add:xml <access origin="cdvfile://*"/> <allow-intent href="cdvfile://*"/> <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    • For iOS add <preference name="iosPersistentFileLocation" value="Library"/>

Required cordova plugins:

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:

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

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

}); ```