ハイブリッドアプリでイメージリストをロードして表示するベストプラクティス

Question

イメージを表示する大きなリストがあるIonic-1アプリがあります（これにはcollection-repeatが使用されています）。

今のところ、私はアプリで画像を発送します。しかし、リストは時間とともに進化し、私のアプリはサーバーからリストを取得し、新しい項目があるかどうかをチェックし、新しい画像にリモートURLを使用します。

リストが大きくなっており（300アイテム以上）、これを管理することはアプリにとってかなり重いです。さらに、.apkまたは.ipaが大きくなりすぎているため、アプリケーションで画像を配送することが不可能になります。

私は自分の画像を管理するためのより良い方法を使い、それを動的に表示するためのより良い方法を使いたいと思います。

私のコレクションのサーバーイメージを呼び出すことは可能ですか？それはスムーズでパフォーマンスの高いものですか？ イメージが呼び出された後は、ローカルメモリ（おそらくlocalStorage）に保存され、次回のリスト表示が高速になるようにできますか？はいの場合、これを行う方法は？

これは動的リストを管理する最善の方法ですか？ これは、最高のUXのためのベストプラクティスを聞きたいと思います。

ありがとうございました！

ここでは、コードの私のビットです：

<div class="boardselection firstScreen" ng-if="transitionFinished"> 

<ion-item collection-repeat="item in prodataSelect | orderBy:data.sort | filter: data.selectBrand.brand:true | filter: data.selectName.name | filter: generalSearchFunc | filterObj:['brand','modelStrict']" item-width="25%" item-height="35%" item-render-buffer="16"> 

    <a class="optionfuninit item-content" data-proid="{{item.id}}" on-tap="whatToDo(item.id,$event);" ng-class="item.fun == '0' ? 'aNormal' :(item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))"> 

     <div class="listviewTrophy" ng-if="isWinning(item.id)"> 
      <i class="icon ion-trophy"></i> 
     </div> 
     <i class="icon ion-female" ng-show="item.gender == 'female'"></i> 
     <!-- <p class="flex-caption" fittext fittext-min="10" fittext-max="15" ng-bind="item.modelStrict" > 
      {{item.modelStrict}} 
     </p> --> 
     <div class="listviewtexts flex-caption" ng-class="item.fun == '0' ? 'aNormal' :(item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))"> 
      <span class="listviewtextsmodel">{{item.modelStrict}}</span> 
     </div> 
     <div class="imagebox"> 
      <img class="imageoptionsmodel " ng-src="{{imagesUrls[item.imageName]}}"/> 
     </div> 

    </a> 

</ion-item> 

Answer 1

あなたはそれのように動作しますイオンキャッシュ-SRC（https://github.com/BenBBear/ionic-cache-src）

を使用することができます。

または

$ ImageCacheFactoryを使用してキャッシュに保存することができます。 docs here