加载并显示混合应用程序中的图像列表，最佳做法

我有一个Ionic-1应用程序，其中有一个显示图像的大列表（我为此使用collection-repeat）。加载并显示混合应用程序中的图像列表，最佳做法

现在，我用应用程序发送图像。但是这个列表会随着时间的推移而演变，所以我的应用程序从服务器获取列表，然后检查是否有新项目，并使用远程URL来显示新图像。

该列表变得越来越大（更多300个项目），所以管理这个应用程序非常繁重。此外，使用应用程序发布图像将变得不可能，因为.apk或.ipa变得太大了。

所以我想用更好的方式来管理我的图像，也是更好的方式来动态显示它们。

是否有可能在我的收藏中调用服务器映像 - 重复并使其平滑和高效？这是可能的，一旦图像被调用，它被保存在本地内存（可能是localStorage），以便下次列表显示它更快？如果是的话，该怎么做？

这是管理动态列表的最佳方式吗？我想听听最佳实践，以获得最佳用户体验。

感谢您的帮助！

这里是我的代码位：

<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>

来源

2017-06-01 Louis