ionic-img-cache 🖼
Ionic directive to cache images or element background images on first load. Working on top of imgcache.js library.
This library works with Ionic Framework (v >= 1.0), the supported platforms being:
- Android
- iOS
- Windows Phone 8.1
- Amazon Fire OS
Instalation
-
Install
-
npm
npm install --save ionic-img-cache
-
yarn
yarn add ionic-img-cache
-
Bower
bower 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 cordova plugin add cordova-plugin-file-transfer
-
Inject as dependency into your app, example:
angular
- Edit config.xml file:
- Add
<access origin="*"/>
- For Android add:
- 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 background image set with css or ng-style</div>
Component:
Note: Components are supported with angular >=1.5.0, if older version used without component
polyfill, component can't be used.
<ion-img-cache-component img-src="{{ imagePath }}" alt="my fancy picture"></<on-img-cache-component>
Cache service public methods:
All methods are async, wrapped into angular $q
service.
add
Adds file to local cache.
Example:
angular ;
get
Gets file local url if it present in cache.
Example:
angular ;
remove
Removes file from local cache if it present.
Example:
angular ;
checkCacheStatus
Checks file cache status by url.
Example:
angular ;
checkBgCacheStatus
Checks elements background file cache status by element.
Example:
angular ;
clearCache
Clears all cahced files.
Example:
angular ;
getCacheSize
Gets local cache size in bytes.
Example:
angular ;
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.
headers
Type: Object
Default value: {}
Adds custom request headers.
folder
Type: String
Default value: ion-img-cache
Set name of cached files directory.
cacheClearSize
Type: Number
Default value: 0
Set quota after which cache folder will be cleared.
Example:
angular ;