Ionic app: caching images

ionic-v1
1

We have developed an ionic app, which has a master and a detail view. The master view mainly consists of a ion-slide-box with many images as slides. The images are css background images loaded from a web server.

Now, the problem is, every time we go back from the detail view to the master view, the view gets rerendered completely and all the images get reloaded which makes it very slow.

We have implemented some image caching on the client and on the server (using ETags) with some improvements, however we are still not satisfied with the solution.

Are there any suggestions for best practices on this toppic?
Any help is greatly appreciated.
Thank you!
Dominik

4 Likes
2

Hello… were you able to resolve this? I’m also looking at doing something similar now.

3

Have you checked this information out here >> https://github.com/chrisben/imgcache.js

4

@dominik & @m2alliance pleas have a look at:

1 Like
5

Thanks… I’ll take a look right now.

6

Hi @patrickdu - do you have any additional docs for this by chance. I’m still unable to cache the images.

7

Can you send me your console output?
Have you installed the file plugin?
Is it working in a browser?

8

I think I’ve narrowed it down via the imgcache.js file. The files cache as normal with <img src="link here" /> When I use the <img ng-src="{{image-link}}" /> format, it doesn’t recognize it. The example works but, it uses the first format.

9 
INFO: LocalFileSystem opened imgcache.js:44
INFO: Local cache folder opened: /imgcache imgcache.js:44
INFO: LocalFileSystem opened imgcache.js:44
INFO: Local cache folder opened: /imgcache :44
10

it works with ng-src, but you have to add ng-cache.
For example: <img ng-cache ng-src="{{data.image}}" />

11

My issue seems to get to this spot to check if the image is cached:

ImgCache.isCached(src, function(path, success) {

                if (success) {
                    ImgCache.useCachedFile(el);
                } else {
                    ImgCache.cacheFile(src, function() {
                        ImgCache.useCachedFile(el);
                    });
                }
            });

I can see the “src” via console log but, it doesn’t respond. Possibly a path issue?

12

hi @patrickdu - I was able to figure it out on what was happening. Tested it out and works great. Thanks again for your information and help on this!

13

Thank you… it works for me.
Indeed, is there any way to cache background images?
Thanks in advance.

14

Using javascripts native Image object, you could preload images and thus make rendering faster, even when removing them from the dom they will remain in memory:

Usage is simple as discribed in following resource:

This is very easy to implement, you could for example in your application’s run command load all the image urls that you’re going to load :smile: I think it will “cache” them for as long as the app runs (or rather: the image object exists) but I don’t think it will “cache” them between different startups of the app.

15

Hi All. Can anyone helps me. ?
I am build application using ionic, cordova.
I get data from external source and want to cache images for offline mode.
I try to use this https://github.com/chrisben/imgcache.js and this https://github.com/sunsus/ngImgCache. That i have read above. It seams to me cashed. But when i try run app for testing on Ipad. It does not launch. It starts but nothing showing (just black screen)? Are any ideas?
P.S sorry for my bad english

16

I don’t think this is still an issue with caching in .14 - please confirm

17

@m2alliance was there any further updates to caching the images? I am worried about saving too much data on my users device

18

Hi @whsconcepts - Storage was a non issue for how I had designed the app. I would cache the images and refresh when the app was updated by the user. Not sure if that helps.

19

Hi @m2alliance thanks again for your response i am going to implement your solution to improve my app (https://play.google.com/store/apps/details?id=com.whsconcepts.displaypictures&hl=en) is eating a lot of hosting bandwidth because of the continues reloading of the images when going back to master page.

Thanks again i will update you if it works

20

How we can cache image in ionic 2 (typescript) ?