Question

使用nativescript.org网站上提供的示例我创建了一个页面来测试图像缓存组件。 tns-core-modules / ui / image-cache

cache.push（）正常工作。每当我使用cache.get（url）时，对象都会返回null。我永远无法检索缓存的图像。

OnComplete推送似乎可以从缓存中检索图像，但似乎无法保留。

这发生在模拟器以及实际连接的android设备上。

我尝试从头开始创建一个空的hellow-world javascript应用程序 tns创建--template tns-template-hello-world来测试样本，并且存在相同的问题。

    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 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 iamge
            }
        }
    });
}

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

Answer 1

image-cache模块没有持久性存储。图像永远不会写入磁盘，它只会将图像仅缓存在当前会话的内存中，一旦您的应用关闭，它将丢失所有下载的图像。

或者，如果队列达到分配的最大内存（即设备总内存的1/8），则队列中最旧的图像将被标记为垃圾回收。在这种情况下，如果您再次请求图像，则必须再次下载。

如果我理解正确，则您希望将图像缓存在持久性存储中，因此无需在随后的应用程序启动时再次下载该图像。您可以通过使用Http模块下载图像并将其写入文件来手动执行此操作。我们也有一些用于相同目的的插件，nativescript-web-image-cache或nativescript-image-cache-it在这里很少提及。

Answer 2

正如Manoj所说，图像高速缓存位于内存高速缓存中，并且预期在初始加载时将收到null。但是，一旦加载了图像，您应该可以轻松地进行检索。

为方便起见，我提取了cuteness.io测试应用here。在应用程序中，image-cache用于为列表视图中的每个项目加载带有占位符的缩略图。您可以在此行上看到，cache.get在初始加载时将返回null，但是在上下滚动列表项之后，顺序加载将返回对原始图像的引用（{{3} }。请注意，我们没有关闭应用程序，并且视图模型中使用了图像缓存来加载thumbnail属性-在ListView控件的上下文中，这意味着每次单元格被调用时都会触发getter方法。渲染（向上滚动和向下滚动触发回收，并且渲染单元格将触发绑定）。

nativescript图像缓存模块无法按示例工作

2 个答案: