NOTE! You are browsing legacy documentation. For latest visit docs.nativescript.org.

NativeScript Core
In this article
Not finding the help you need?
Ask the community

Image Cache

The image-cache module contains the Cache class, which handles image download requests and caches the already downloaded images.

Basics

Using Cache objects requires the tns-core-modules/ui/image-cache module. 

const Cache = require("tns-core-modules/ui/image-cache").Cache;

Requesting and caching images with image-cache module while using a placeholder image. 

const cache = new Cache();
cache.placeholder = fromFile("~/images/logo.png");
cache.maxRequests = 5;

// set the placeholder while the desired image is downloaded
viewModel.set("imageSource", cache.placeholder);

// Enable download while not scrolling
cache.enableDownload();

let cachedImageSource;
const url = "https://avatars1.githubusercontent.com/u/7392261?v=4";
// Try to read the image from the cache
const image = cache.get(url);

if (image) {
    // If present -- use it.
    cachedImageSource = imageSource.fromNativeSource(image);
    viewModel.set("imageSource", cachedImageSource);
} else {
    // If not present -- request its download + put it in the cache.
    cache.push({
        key: url,
        url: url,
        completed: (image, key) => {
            if (url === key) {
                cachedImageSource = fromNativeSource(image);
                viewModel.set("imageSource", cachedImageSource); // set the downloaded image
            }
        }
    });
}

// Disable download while scrolling
cache.disableDownload();

API Reference for

See Also Android Image Optimization