I created a custom
image-cache for caching images locally. I was using
ImgCache.js but decided to use
FileTransfer instead to download and store the image.
My template is fairly simple,
<img class="image-cache" [src]="cache" /> where I’m setting the
cache to the local path after the image has been downloaded.
I have all my logic to download, save and use the cached image inside the
ngOnInit method. The
Component works fine on the initial load, using the locally cached image as expected.
However, upon clicking
Back and returning to a previous
image-cache is now blank.
console.log statements to the lifecycle methods
ngAfterViewChecked but they are called dozens of times, worried about re-downloading the image unnecessarily.
I’m struggling to understand where best to populate the
Component, so that it loads upon returning to a previous
Page. Any suggestions?
I find this a bit confusing in the first place because views are cached by ionic. If you click the back button the page should still be there just as you left it.
Also it seems like you’re using angular life cycle events instead of the ionic ones, which might suit your use case better.
Also the browser should be caching images on its own.
Hi @rlouie, thanks for the reply!
The reason for the
image-cache Component is to store images locally so they are available entirely offline plus it handles placeholder images, fallback images, fade in effect, etc.
image-cache Component is available at https://github.com/ushahidi/platform-mobile/blob/master/src/components/image-cache/image-cache.ts
The issue I’m having, is if I don’t call
reloadCacheImage inside of
ngAfterContentChecked, then the image is blank after clicking Back on the child Page, aka returning to the Page with the image.
Which Ionic2 specific life cycle events are you referring to? I’m using
ionViewWillEnter, etc in my Pages, but not aware of any Ionic specific events for Components?
Oh okay, I saw you mention ngAfterContentChecked and thought you were just using the regular Angular events, not the ionic ones, so nevermind on that.
That image cache thing is full of promise anti-patterns, so it’s quite hard to read, and could cause some errors to get swallowed, so I’m gonna skip over that, but you could definitely have some issues in there, I’d recommend refactoring a lot of that.
Even then, views are cached in Ionic. If you hit back on a child view, the view behind it is not re-rendered, the constructor is not called. So the only thing that could be blanking out your images would be something in the ionic lifecycle vents, unless you’ve turned off view caching.