イオン2キャッシング画像

Question

イオン2アプリケーションを作成していて、画像をキャッシュします。 - ImgCache.isCachedコールバックがある https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e

https://github.com/chrisben/imgcache.js/blob/master/js/imgcache.js

私は与えられたソリューションを実現し、私は予想通りImgCacheモジュールが動作しないことを参照してください。長い間、私はこれらの文献が見つかったウェブ上で検索した後

決して呼び出されません。

ionic 2でイメージをキャッシュするためのアイデアやその他の優れたソリューションはありますか？

import { Directive, ElementRef, Input } from '@angular/core'; 

import ImgCache from 'imgcache.js'; 

@Directive({ 
    selector: '[image-cache]' 
}) 
export class ImageCacheDirective { 
    constructor (
    private el: ElementRef 
) { 
    // init 
    } 

    ngOnInit() { 
    // This message is shown in console 
    console.log('ImageCacheDirective *** ngOnInit: ', this.el.nativeElement.src); 

    this.el.nativeElement.crossOrigin = "Anonymous"; // CORS enabling 

    ImgCache.isCached(this.el.nativeElement.src, (path: string, success: any) => { 
     // These message are never printed 
     console.log('path - '+ path); 
     console.log('success - '+ success); 

     if (success) { 
     // already cached 
     console.log('already cached so using cached'); 

     ImgCache.useCachedFile(this.el.nativeElement); 
     } else { 
     // not there, need to cache the image 
     console.log('not there, need to cache the image - ' + this.el.nativeElement.src); 

     ImgCache.cacheFile(this.el.nativeElement.src,() => { 
      console.log('cached file'); 

      // ImgCache.useCachedFile(el.nativeElement); 
     }); 
     } 
    }); 
    } 
} 

app.nodule.esで：

======== UPDATE ==========ここ

は、私が使用するディレクティブのコードです私が行います

import { ImageCacheDirective } from '../components/image-cache-directive/image-cache-directive'; 

、次にhome.htmlに：

<img src="http://localhost/ionic-test/img/timeimg.php" image-cache> 

Answer 1

それは後半だが、おそらくこれは、ソリューションです：

1.コルドバ変数をFileTransferインストール：

ionic plugin add cordova-plugin-file-transfer --save 

2.初期ImgCacheコルドバ火災のdevicereadyイベントを。

initImgCache() { 
    // activated debug mode 
    ImgCache.options.debug = true; 
    ImgCache.options.chromeQuota = 100 * 1024 * 1024; // 100 MB 
    ImgCache.init(() => { }, 
     () => { console.log('ImgCache init: error! Check the log for errors'); }); 
} 

initializeApp() { 
    this.platform.ready().then(() => { 
     this.initImgCache(); 

     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
} 

Answer 2

別のオプションは、専用のキャッシュを使用することです： - （このメソッドは、デフォルトのプロジェクトの開始を思い付くしたりinitializeApp（）メソッドとそれらを統合する）SRCでは/アプリ/ app.component.tsは、これらのメソッドを追加しますマネージャーのイオン。自分ですべてを実装する代わりに。これは、それが伝える...答える「リンクのみ」ではありません ： 1.一般的なキャッシュ実装：https://github.com/Nodonisko/ionic-cache 2.この1つは、画像のためのより良いです：https://github.com/BenBBear/ionic-cache-src

EDITここ

は、2つのオプションですユーザーはゼロから実装しようとするのではなく、既成の実装を使用する必要があります。