Nativescript - 如何正确使用 ui/image-cache 中的占位符属性使其工作? [英] Nativescript - How do I properly use placeholder property from ui/image-cache to make it work?

问题描述

我正在尝试使用一组远程图像创建一个列表视图，并在加载它们以显示占位符图像时.

I'm trying to create a list view with a set of remote images and while they are loading to display a placeholder image.

var imageSource = require("image-source");
var imageCache = require("ui/image-cache");
var cache = new imageCache.Cache();
var defaultImageSource = imageSource.fromResource("img-loading");

cache.enableDownload();
cache.placeholder = defaultImageSource;
cache.maxRequests = 5;

也尝试使用 fromFile 而不是 fromResource.

Tried with fromFile as well instead of fromResource.

有什么技巧吗?

推荐答案

我不知道你是如何使用 ImageCache 但你不能直接设置一个 ImageCache 对象作为 Image 的来源.为了实现你想要的，你必须使用这样的东西(取自 http://pstaev.blogspot.com/2016/04/using-nativescripts-imagecache-to-cache.html):

I'm not sure how are you using the ImageCache but you cannot directly set an ImageCache object as source of an Image. In order to achieve what you want you must use something like this (taken from http://pstaev.blogspot.com/2016/04/using-nativescripts-imagecache-to-cache.html):

主页面.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
      navigatingTo="navigatingTo">
    <ListView items="{{ images }}">
      <ListView.itemTemplate>
        <GridLayout>
          <Image src="{{ imageSrc }}" stretch="aspectFill" height="100"/>
        </GridLayout>
      </ListView.itemTemplate>
    </ListView>
</Page>

主页.ts

import observableArray = require("data/observable-array");
import observable = require("data/observable");
import imageItem = require("./image-item");
import pages = require("ui/page");

export function navigatingTo(args: pages.NavigatedData)
{
    var page = <pages.Page>args.object;
    var model = new observable.Observable();
    var images = new observableArray.ObservableArray<imageItem.ImageItem>();

    images.push(new imageItem.ImageItem("http://foo.com/bar1.jpg"));
    images.push(new imageItem.ImageItem("http://foo.com/bar2.jpg"));
    // ...
    images.push(new imageItem.ImageItem("http://foo.com/bar100.jpg"));

    model.set("images", images);
    page.bindingContext = model;
}

image-item.ts

image-item.ts

import observable = require("data/observable");
import imageCache = require("ui/image-cache");
import imageSource = require("image-source");

var cache = new imageCache.Cache();
cache.maxRequests = 10;
cache.placeholder = imageSource.fromResource("img-loading")

export class ImageItem extends observable.Observable
{
    private _imageSrc: string
    get imageSrc(): imageSource.ImageSource
    {
        var image = cache.get(this._imageSrc); 

        if (image)
        {
            return image;
        }

        cache.push(
            {
                key: this._imageSrc
                , url: this._imageSrc
                , completed:
                (image) =>
                {
                    this.notify(
                        {
                            object: this
                            , eventName: observable.Observable.propertyChangeEvent
                            , propertyName: "imageSrc"
                            , value: image
                        });
                }
            });

        return cache.placeholder;
    }

    constructor(imageSrc : string)
    {
        super();
        this._imageSrc = imageSrc;
    }
}

这篇关于Nativescript - 如何正确使用 ui/image-cache 中的占位符属性使其工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！