image-cacheモジュールには、画像ダウンロードリクエストを処理し、既にダウンロードされた画像をキャッシュするCacheクラスが含まれています。
Cacheオブジェクトを使用するには、 tns-core-modules/ui/image-cacheモジュールが必要です。
const Cache = require("tns-core-modules/ui/image-cache").Cache;import { Cache } from "tns-core-modules/ui/image-cache";プレースホルダー画像を使用しながら、 image-cacheモジュールで画像をリクエストおよびキャッシュします。
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();const cache = new Cache();
cache.placeholder = fromFile("~/images/logo.png");
cache.maxRequests = 5;
// set the placeholder while the desired image is donwloaded
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 myImage = cache.get(url);
if (myImage) {
// If present -- use it.
cachedImageSource = fromNativeSource(myImage);
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 iamge
}
}
});
}<Image src="{{ imageSource }}" stretch="aspectFill" />