Lazy loading ion-slides to ion-slide-box

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 class="col col-90" >                                     
                                <div data-time-summary="item"></div>
                        <div data-ng-repeat="day in item.timeDetails" ng-cloak>
                            <div data-day-details="day"></div>
                    <span ng-switch-default>
                        <div class="row" style="margin-bottom: 10px;">                                                 
                            <div class="col col-10">                 
                                <p class="task-invoice"></p>
                            <div class="col col-90" >
                                <div data-invoice-summary="item"></div>
                        <div data-ng-repeat="alloc in item.details" ng-cloak>
                            <div data-alloc-details="alloc"></div>

still showstopper…
any advice and suggestions will be greatly appreciated.

Hey you could do something like this.

This way, the images won’t load until they are in a three slide range.


Thank you !
It will be enough just to display $ionicLoading popup when user clicks on an item from the main view and angular/ionic finishes parsing/loading slides to the ionic slides view. I am not sure how to make it work. Any ideas ?

Hey, thanks for the link. I implemented this in my ion-slide-box (100+ slides in an ng-repeat, with 1-5 thumbnail images in each slide) and I can verify that the ng-hide is working properly in the Element inspector. Unfortunately, it has not decreased the load time.

Any other thoughts?


Check out this post,

Oh man. That looks like a lot of work.

Instead, I went and implemented angular-carousel. Only one problem. The carousel loads and works great… but now, as a result of having to include “angular-touch.js”, all of my click handlers are completely screwed up. So I’m going to have to roll back the Angular-carousel implementation. Real bummer, because it’s working great and loads almost instantaneously…


Found this:

It appears to be a slightly different version of the Angular Carousel, with no angular-touch.js dependency. But it has a dependency on angular-mobile.js, which I assume will cause the same problems/conflicts with Ionic?

In the meantime… FEATURE REQUEST. LAZY LOADING OF SLIDEBOX CONTENTS. I would switch to nightly builds to get this.


FYI, for those interested in lazy loading of large, swipable carousels:
I have a temporary solution for the lazy load problem with an angular-carousel implementation.

In order to avoid click conflicts with Ionic, you can remove the ngClick directive from angular-touch.js, as described in this Issue:

I myself left the directive intact but replaced the contents of the onClick function with a console.log(‘angular touch click event ignored’); {{update: removing the onClick function was not enough, I had conflicts elsewhere and ended up removing the entire directive.}}

I would still love to see slide buffering implemented in ion-slide-box. I didn’t happen to need the slide indicator, so it doesn’t feel like an aesthetic jump, but it would feel even cleaner if I could use all Ionic Slide Boxes in my app.


Hey, so lazy loading of slides is definitely on our mind. We have a nice list of APIs and Directives that need an audit after 1.0 final lands, so this is something that we are looking at.

Great. Any idea on time frame? I’m having problems with angular-carousel with full-frame images, and would love a nice clean solution.

Anyway, keep up the great work. Really loving it when it works. :smile:

No specific timeframe, we’re not big fans of setting dates on things. If something happens and we don’t make that date, we don’t want to look like liars :smile:

Basically after all the apis and things get finalized, we’ll do an api audit on the directives to get things cleaned up.

1 Like

Any updates on this?



@mhartington Any update on the merge? It seemed to be done but not merged or released.

Looks like this commit reverted back to the old slidebox.