how do i cache images in nativescript angular

Question

I created an app and it does work great but images load every time I scroll up and down, I looked it in google and found this, the problem is I use angular, there is no such thing as viewModel in my angular version, how do I apply cache image into template?

Jay Thakkar · Accepted Answer · 2018-06-08 11:41:16Z

2

You can try this code. It is working for me.

.ts code

 import imageCacheModule = require("ui/image-cache");
 import imageSource = require("image-source");
 var cache = new imageCacheModule.Cache();

 private _imageSrc: any;
 private imgSource: any;


    getImageCache(imageURL) {
        cache.placeholder = imageSource.fromResource("res://no-image.png");
        cache.maxRequests = 10;

        cache.enableDownload()
        var images = cache.get(imageURL)
        if(images) {

           return images
        } else {

            cache.push({
                key: imageURL,
                url: imageURL,
                completed: (image: any, key: string) => {
                    if (imageURL === key) {
                        this.imgSource = imageSource.fromNativeSource(images);
                    }
                }
            })

        cache.disableDownload();
    }

HTMl code

<Image  [src]="getImageCache(item.image?.url)" class="item-image"></Image>

answered Jun 8, 2018 at 11:41

Jay Thakkar

1,56212 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Murat Çorlu Over a year ago

How does this work? else part doesn't have any return statement. And what is that private imgSource property? I'm confused.

Jay Thakkar Over a year ago

In else 'this.imgSource' will update the image. You can add console and check.

Collectives™ on Stack Overflow

how do i cache images in nativescript angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related