9.0 Released! โ†’ Native ESM runtimes ๐Ÿš€, Vite support โšก๏ธ, multi-window apps and more...
Read Announcement

ImageCache allows you to cache an image from an HTTP request. You can alternatively use a plugin that auto handles image caching like @triniwiz/nativescript-image-cache-it.

Using ImageCache โ€‹

For consistency, you should use a single ImageCache instance throughout your app.

ts
import { ImageCache } from '@nativescript/core'

const imageCache = new ImageCache()

Save an image to cache โ€‹

To retrieve an image from a remote server and cache it, use either the push or enqueue method. These methods cache the android.graphics.Bitmap (Android) or UIImage (iOS) instance.

ts
imageCache.enqueue({
  url: this.url,
  key: 'cat',
  completed(image: android.graphics.Bitmap | UIImage, key) {
    console.log('Successfully retrived and cached the cat image')
  },
  error(key) {
    console.log('cache error')
  },
})

Note

To call the push method instead, just replace enqueue with push

Getting an image from cache โ€‹

To get an image from the cache, use the get method.

ts
const cachedImage = imageCache.get('cat')

API โ€‹

constructor โ€‹

ts
const imageCache = new ImageCache()

Creates an ImageCache instance.


placeholder โ€‹

ts
imageCache.placeholder = imageSource

The image to be used to notify for a pending download request - e.g. loading indicator.


maxRequests โ€‹

ts
imageCache.number = 2

The maximum number of simultaneous download requests. Defaults to 5


push โ€‹

ts
imageCache.push(request)

Adds a new image to the start of the cache. request is an object with the following members:

  • url(string): The url of the image.
  • key(string): The name to uniquely identify the image in the cache.
  • Optional: completed is a function to be called upon caching an image successfully.
  • Optional: error is a function to be called when error has occured during caching.

enqueue โ€‹

ts
imageCache.enqueue(request)

Adds a new image to the end of the cache. For more details about the request parameter, see the push() method.


get โ€‹

ts
imageCache.get(key)

Gets the image with a given key from the cache, or undefined if it's not in the cache.

remove โ€‹

ts
imageCache.remove(imageKey)

Remove the specified image from the cache.


clear โ€‹

ts
imageCache.clear()

Clears all the images from the cache.


Previous
Http