Nativescript Loading Images

Question

これは私のシナリオです：私のメインビューでは、アイテムのリストをロードしています。各項目にはimageURLプロパティがあります。 ImageURLプロパティにImageコンポーネントをバインドしています。すべてがうまくいきますが、画像に余分な時間がかかり、画像コンポーネントが折りたたまれています。画像がロードされると、画像コンポーネントが正しく表示されます。これにより、イメージがレンダリングされるときにページ上に望ましくないシフトが生じます。

他の2つのビューで同じイメージがレンダリングされます。

このシナリオを処理するベストプラクティスは何ですか？私は元の64文字列の代わりに画像urlをロードしようとしましたが、初期ビューの読み込みが大幅に遅くなりました。

イメージをプリフェッチしてビュー間をナビゲートするときにイメージを再利用するにはどうすればよいですか？私は、正確なシナリオに対処しているように見える画像キャッシュモジュールを見ていましたが、ドキュメンテーションは非常に曖昧であり、私が見つけた唯一の例（https://github.com/telerik/nativescript-sample-cuteness/blob/master/nativescript-sample-cuteness/app/reddit-app-view-model.js）は実際には同じシナリオに対処しませんでした。私がコードを正しく理解していれば、これはバーチャルスクロールに関するものです。私の場合は、2-3個のアイテムしか持たないので、スクロールは本当に心配していません。

私は何かアドバイスをいただきありがとうございます。

ありがとうございます。

Answer 1

私はいくつかの研究の後、私のために働く解決策を考え出しました。ここに私がやったことです：

• アプリは、私は、私はすべてのオブジェクトを取得し、グローバル変数にそれらをロードするためのHTTP呼び出しを行った観測可能なオブジェクト
• のリストが含まれてグローバル変数を作成し起動すると

<Image loaded="imageLoaded" />

：私（画像リピータ項目テンプレートの一部）として画像を表示するビューで

JSファイルで

私はとimageLoadedイベントを扱っ：初期ロード後、私はグローバル変数の一部としてImageSourceはを節約し、他のすべての上でいます、だから、

​​

ページURLからロードするフォールバックとともにそこから取得していますが、このアイテムにはイメージソースがありません。

私はこれは私が画像を保存するために使用していたメモリの量に関するいくつかの懸念を上げることができる知っているが、私の場合には、私はこれ以上2-3以下の画像の話おりますので、私はこのアプローチは発生しないだろうと思いました任意のメモリの問題。

より良いアプローチが全く存在している場合、私はこのアプローチは、より効率的にする方法上の任意のフィードバックを聞くのが大好きかでしょう。

Answer 2

これを試しましたか？ https://github.com/VideoSpike/nativescript-web-image-cache

コミュニティプラグインを使用することをお勧めします。あなたもこれを見てみることができます： https://docs.nativescript.org/cookbook/ui/image-cache

Answer 3

nativescript-frescoプラグインを使用できます。 Android上で画像を管理するための人気のFrescoライブラリをラップしている{N}プラグインです。プラグインは、アドバンストアトリビュートの完全なリストについては、readmeのthis sectionを参照することができます：フェードインの長さ、placehdler画像、エラー画像（ダウンロードが失敗した場合）、コーナーラウンディング、アスペクト比によるダイナミックサイジングなどの機能を公開します。また、プラグインは、画像がリモートソースから取得されているときにカスタムロジックを追加するのに使うことができる有用なものを公開しています（events）。

単にアプリケーションのonLaunchイベントでそれを初期化し、.initialize（）関数を呼び出すプラグインを使用するには：単にあなたのページ内のどこかにFrescoDraweeを配置し、そのimageUriを設定しその後

var application = require("application"); 
var fresco = require("nativescript-fresco"); 

if (application.android) { 
    application.onLaunch = function (intent) { 
     fresco.initialize(); 
    }; 
} 

を：

<Page 
    xmlns="http://www.nativescript.org/tns.xsd" 
    xmlns:nativescript-fresco="nativescript-fresco"> 
    <nativescript-fresco:FrescoDrawee width="250" height="250" 
             imageUri="<uri-to-a-photo-from-the-web-or-a-local-resource>"/> 
</Page>