イオン：高速読み込み画像

Question

私はイオン3の小さなアプリケーションを構築し、角度の2/4

ています、私はURLから（画像あたり5メガバイトを）イメージのリストをロードする問題を抱えている

それが取ります私のイメージを表示するために多くの時間。

イメージを高速に読み込むにはどうすればよいですか？

最初に低品質で画像を表示する方法はありますか？

任意のリンク（FacebookとのWhatsAppのような）、

//js 
private photo = "http://my-url.com"; 
private photo2 = "http://my-url-2.com"; 

//html 
<div> <img [src]="photo"> </div> 
<div> <img [src]="photo2"> </div> 

任意のチュートリアル、任意のブログは...ありがとうございます！

Answer 1

最も便利な方法の私見は、以下のとおりです。

1. 圧縮 - あなたは自問する必要がある最初の事：私は実際に5メガバイトの画像は必要ですか？それは大きすぎますか？圧縮できるか（例：jpeg/png）？

2. サムネイル - ロット小さく、ロードすることがはるかに高速であり、原画像の1（またはそれ以上）のバージョン。多くの場合（例：リスト、概要など）、imgコンテナのサイズがかなり小さいため、元の画像は必要ありません。だから1つの方法は、特定の用途に必要なサイズだけをロード+表示することです。 5MBのバージョンが本当に必要なときは、サムネイルから始めて、フルサイズの読み込みが完了したら置き換えることができます。これはローディング時間を短縮するものではありませんが、よりスムーズな感じです。

3. プリロード - あなたの画像が実際に表示されたときにスロー積載一部を除去する（例えば、あなたは、彼らがすぐに表示されます知っているとき）の画像をプリロードできます。

4. キャッシングは - あなたのイメージはそれほど変化していないとき、あなたはあなたのデバイス上の画像をキャッシュすることを検討してください。あなたはそれではなく、リモート1のローカルコピーを取り、ほぼ瞬時に表示することができます（でも、アプリの再起動後に）二度目の5メガバイトの画像をロードする必要がある場合は、必ずそのように。

理想的

（とあなたのユースケースに応じて）あなたはすべての4つの事柄組み合わせ：画像は一度だけロードされていることを確認するために圧縮された画像を、あなたのイメージの異なるサイズのバージョン、必要なプリロードとキャッシュを。私のアプリで

私は、私は非常にお勧めすることができますシンプルだが素晴らしいプラグインionic-image-loaderを使用しています。実装が簡単で、3.や4.をほとんど何の努力もなくカバーします。

私は助けてくれることを願っています！