在混合应用程序中加载和显示图像列表的最佳实践

Question

我有一个Ionic-1应用程序，其中有一个显示图像的大型列表（我使用collection-repeat）。

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

列表越来越大（超过300项），因此在应用程序上管理这个很重。此外，使用应用程序运送图像将变得不可能，因为.apk或.ipa变得太大了。

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

是否可以在我的collection-repeat中调用服务器图像并使其平滑且高效？这是可能的，一旦图像被调用，它就被保存在本地存储器中（可能是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>

Answer 1

你可以使用 ionic-cache-src （https://github.com/BenBBear/ionic-cache-src）

它的工作方式如下：

或

您可以使用 $ ImageCacheFactory 将其保存在缓存中， docs here。