RadListView の ListViewStaggeredLayout ディレクティブで解決しようとしている 2 つの問題があります。1)画像の初期読み込みをスムーズにするために、loadMode="async"を使用したいと思います。これは ListViewLinearLayout ではうまく機能しますが、ListViewStaggeredLayout ではまったく機能しません。loadMode ="async"を指定しないと、ずれたレイアウト イメージが表示されますが、最初の読み込みはスムーズではありません。2) このリスト ビューにリモート URL の画像を表示したいのですが、ここでも線形レイアウトは機能しますが、2 列のスタッガード レイアウトは機能しません。この質問は、役立つ情報を受け取った以前に尋ねられた SO の質問の続きですが、今はアプリの開発をさらに深めています。
これが私のHTMLの一部です：
<!-- pictures is an ObservableArray of objects like this:
{"title": "Dried Meat with Spices", "author": "Nice to Meat You", "photo": "res://listview/layouts/paleo1.jpg", "category": "paleo"} -->
<div *ngIf="isLinearActive && useLocalPhotos">
<RadListView [items]="pictures">
<template tkListItemTemplate let-item="item">
<GridLayout (tap)="viewImage(item)">
<Image class="wall-cover" [src]="item.photo" stretch="aspectFill" loadMode="async"></Image>
</GridLayout>
</template>
<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200"></ListViewLinearLayout>
</RadListView>
</div>
<div *ngIf="!isLinearActive && useLocalPhotos">
<RadListView [items]="pictures">
<template tkListItemTemplate let-item="item">
<GridLayout (tap)="viewImage(item)">
<Image class="wall-cover" [src]="item.photo" stretch="aspectFill"></Image>
</GridLayout>
</template>
<ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
</RadListView>
</div>
<!-- photosURL is an ObservableArray of objects like this used to reference remote url:
{"photo": "https://lh3.googleusercontent.com/za3LhYb5Nzve0BcgVCIgAwL9ETcUEpOoZVdo9KNnqi_WsowVpOXXzC-L4s9ZcGAL080GVw3YWDLboDuoR3F8"} -->
<div *ngIf="isLinearActive && !useLocalPhotos">
<RadListView [items]="photosURL">
<template tkListItemTemplate let-item="item">
<GridLayout (tap)="viewImage(item)">
<Image class="wall-cover" [src]="item.photo" stretch="aspectFill" loadMode="async"></Image>
</GridLayout>
</template>
<ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200"></ListViewLinearLayout>
</RadListView>
</div>
<div *ngIf="!isLinearActive && !useLocalPhotos">
<RadListView [items]="photosURL">
<template tkListItemTemplate let-item="item">
<GridLayout (tap)="viewImage(item)">
<Image class="wall-cover" [src]="item.photo" stretch="aspectFill"></Image>
</GridLayout>
</template>
<ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
</RadListView>
</div>
完全なGithub リポジトリは次のとおりです。私はこれを iOS シミュレーターと iOS デバイスでのみテストしました。Android のテストは行っていません。
RadListView ListViewStaggeredLayout のパフォーマンスを向上させるにはどうすればよいですか? また、それをリモート画像で使用できますか? または、これらの画像をローカル ファイル システムに保存してそこから参照する必要がありますか? どうも。