Ionic Img Cache

Ionic Img Cache

Image caching directive using imagecache.js library.

Free!

(2)
Vitaliy Bobrov

Vitaliy Bobrov

Member since 2014

Details

Version:
1.0.3
Size:
0mb
Ionic:
1.0 beta,1.0.x,1.3.x
Platforms:
iOS, Android, Windows Phone
Released:
5 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
image, cache, performance

ionic-img-cache

Bower version npm 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:
  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:

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);
  });

Hey there! You'll need to log in before you can leave a comment here.

Purusothaman Ramanujam

Purusothaman Ramanujam   ·   5 years ago

I am getting lot of "Status Code:400 Bad Request" messages in the console due to this plugin. Is that expected?

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

No, it worked good in my projects, may be you can provide an example or some code to see what was going wrong?

Pulkit

Pulkit   ·   5 years ago

hi..Thanks for the directive, haven't tried it yet, but do you have a github link?

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

Yes, just click on purchase externally button

Cristian Olaru

Cristian Olaru   ·   5 years ago

Hey, can you tel us where is the location of the cache. How can we delete it. And in general how we can verify if the cache is working.

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

It stores cache in the file system, details here https://github.com/chrisben/imgcache.js/. I can add more wrappers for ImgCache methods (clearCache for example) if needed. To check thet image cached just see img element markup)

Jodie

Jodie   ·   5 years ago

Great! Bookmarked!

Narendra

Narendra   ·   5 years ago

Hi Thanks , Working fine , But clear caching is not working

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

Could you create issue on github https://github.com/vitaliy-bobrov/ionic-img-cache I'll try to fix it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Patrick Foh

Patrick Foh   ·   4 years ago

Great plugin. How we clear the image cache

Vitaliy Bobrov

Vitaliy Bobrov   ·   4 years ago

Sorry for a late reply, I've just added this feature to the new release :) If you have any other ideas/improvements feel free to create an issue on GitHub. Thank you.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Lukasz

Lukasz   ·   4 years ago

It is not working on iOS10 https://github.com/vitaliy-bobrov/ionic-img-cache/issues/4

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

coolm4n

coolm4n   ·   4 years ago

Hi, I dont see imgcache.js in your repository. Can you help? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

coolm4n

coolm4n   ·   4 years ago

Hi, I dont see imgcache.js in your repository. Can you help? Thanks

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Lukasz

Lukasz   ·   4 years ago

It is not working on iOS10 https://github.com/vitaliy-bobrov/ionic-img-cache/issues/4

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Patrick Foh

Patrick Foh   ·   4 years ago

Great plugin. How we clear the image cache

Vitaliy Bobrov

Vitaliy Bobrov   ·   4 years ago

Sorry for a late reply, I've just added this feature to the new release :) If you have any other ideas/improvements feel free to create an issue on GitHub. Thank you.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Narendra

Narendra   ·   5 years ago

Hi Thanks , Working fine , But clear caching is not working

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

Could you create issue on github https://github.com/vitaliy-bobrov/ionic-img-cache I'll try to fix it.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Jodie

Jodie   ·   5 years ago

Great! Bookmarked!

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

No, it worked good in my projects, may be you can provide an example or some code to see what was going wrong?

Cristian Olaru

Cristian Olaru   ·   5 years ago

Hey, can you tel us where is the location of the cache. How can we delete it. And in general how we can verify if the cache is working.

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

Yes, just click on purchase externally button

Pulkit

Pulkit   ·   5 years ago

hi..Thanks for the directive, haven't tried it yet, but do you have a github link?

Purusothaman Ramanujam

Purusothaman Ramanujam   ·   5 years ago

I am getting lot of "Status Code:400 Bad Request" messages in the console due to this plugin. Is that expected?

Vitaliy Bobrov

Vitaliy Bobrov   ·   5 years ago

It stores cache in the file system, details here https://github.com/chrisben/imgcache.js/. I can add more wrappers for ImgCache methods (clearCache for example) if needed. To check thet image cached just see img element markup)

Hey there! You'll need to log in before you can leave a rating here.

Vitaliy Bobrov   ·     ·   5 years ago

Nice)

Lukasz   ·     ·   4 years ago

it works :)

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Lukasz    ·     ·   4 years ago

it works :)

Vitaliy Bobrov    ·     ·   5 years ago

Nice)