
Ionic Img Cache
Image caching directive using imagecache.js library.
$0.00
Details
- Version:
- 1.0.3
- Ionic:
- 1.x
- Platforms:
- iOS, Android
- Released:
- 4 years ago
- Updated:
- 4 years ago
- Category:
- Plugins
- Tags:
- ,
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
- Bower
- 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"/>
- Add
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);
}); ```