ionic 2 caching images

Question

Я пишу приложение с ионным 2 и хочу кэшировать изображения.

После долгих поисков в Интернете я нашел эти ссылки: https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e

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

Я реализовал данное решение, но я вижу, что модуль ImgCache не так, как ожидалось - ImgCache.isCached обратного вызова никогда не звонил.

Любая идея или другое хорошее решение для кеширования изображений в ионных 2?

======== UPDATE ==========

Вот код директивы я использую:

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 я:

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. Установите Cordova FileTransfer:

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

2. Init ImgCache когда deviceready событие Cordova пожаров. В ЦСИ/приложение/app.component.ts добавить эти методы (или интегрировать их с методом initializeApp() - этот метод приходит с начала проекта по умолчанию):

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

Другим вариантом является использование выделенного кэша менеджер по ионной. вместо того, чтобы реализовать все самостоятельно.

Здесь 2 варианта: 1. Общий реализация кэша: https://github.com/Nodonisko/ionic-cache 2. Это один лучше для изображений: https://github.com/BenBBear/ionic-cache-src

EDIT: Это не является «ссылка только» ответ .. он рассказывает чтобы использовать готовые реализации вместо того, чтобы пытаться реализовать с нуля.