CODEWITHSUNDEEP
performanceionic-frameworklazy-loadinghybrid-mobile-app
Louis
Louis

Reputation: 2608

Best practices to load and display a list of images in an hybrid app

I have a Ionic-1 app in which there's a large list that displays images (I use collection-repeat for this).

For now, I ship the images with the app. But the list evolves with time so my app gets the list from a server, then checks if there are new items, and use remote urls for new images.

The list is getting bigger (more tha 300 items), so managing this is quite heavy on the app. Moreover, shipping the images with the app is going to become impossible, because the .apk or .ipa are getting too big.

So I would like to use a better way to manage my images and also a better way to display them dynamically.

Is that possible to call the server images in my collection-repeat and to make it smooth and performant? Is that possible, that once an image has been called, it's saved in the local memory (maybe localStorage) so that the next time the list displayed it's faster ? If yes, how to do this ?

Is that the best way to manage a dynamical list? I would like to hear the best practice for this, for the best UX.

Here's my bit of code: 

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

Upvotes: 1

Views: 319

Answers (1)

Muhammad Shaharyar
Muhammad Shaharyar

Reputation: 1104

you can use ionic-cache-src (https://github.com/BenBBear/ionic-cache-src)

it will work like : enter image description here

or

you can use $ImageCacheFactory to save it in cache, docs here.

Upvotes: 1

Related Questions