Hi,
I am building an application which first downloads all data from the server and represents a list of items on the main page. When user clicks on any item from the list it builds slides view for this item (like mint does). We are going to run this “application” from the browser, not by wrapping up with cordova, just like a regular web side.
Here is the issue… The number of slides is about 50, each slide could have about 100-150 lines of html markup, so it takes long time between when user clicks on an item from the main list and angular/ionic builds the final html with slides and navigates to the slides show.
How can I improve my design ? Is there any example for lazy loading slides on background and show the first slide immediately and loading the rest of slides on background ?
My slides looks like this:
<ion-slide-box id="details-slide-box" show-pager="false" active-slide="activeSlideValue" on-slide-changed="slideChanged()">
<ion-slide ng-repeat="item in tasks" ng-cloak>
<ion-content class="has-header has-subheader has-footer">
<div class="item" ng-switch on="item.EntityType">
<span ng-switch-when="3">
<div class="row" style="margin-bottom: 10px;">
<div class="col col-10">
<p class="task-time"></p>
</div>
<div class="col col-90" >
<div data-time-summary="item"></div>
</div>
</div>
<div data-ng-repeat="day in item.timeDetails" ng-cloak>
<div data-day-details="day"></div>
</div>
</span>
<span ng-switch-default>
<div class="row" style="margin-bottom: 10px;">
<div class="col col-10">
<p class="task-invoice"></p>
</div>
<div class="col col-90" >
<div data-invoice-summary="item"></div>
</div>
</div>
<div data-ng-repeat="alloc in item.details" ng-cloak>
<div data-alloc-details="alloc"></div>
</div>
</span>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>