slideBox performance is poor after 10 slides and crashes ionic view

ionic-v1
1

I’m using slideBox for display a kind of ebook where every slide contains lots of basic HTML tags including images.

On browser and ripple emulator it works perfectly but when i try it on device Android or IPAD its painfull slow.
Also testing it via “ionic view” makes the application crash.
It was perfect until i stayed under 10 pages of lenght.
The full ebook is now 70 pages.

Well, i can remove slideBox and use a normal “single page” controller but i liked, expecially on IPAD, that with the slideBox you can slides the pages left or right with you finger like the native “ibook” app.

Any suggestion to improve performance?

2

On android you could use crosswalk.

3

I had the same problem.

I solved it using a circular slide buffer. Only 3 slides are loaded at anytime and slide content is replaced dynamically on-slide-changed depending on the direction you swipe.
I’m using more than 100 slides (each with images and text) and it is very smooth on android.
The only downside is that you have to use does-continue=“true” and the slides will loop endlessly.

Let me know if you need more technical details about that solution.

4

I have implemented a similar approach with 3 slides, but it is still not so smooth on my android. Can you give more information about how you replace the content?

on-slide-changed I track an event with $ionicAnalytics, perhaps this could also have an impact on the performance.

5

I guess you solved your problem since August but let me know if you still need info on how i did it.

6

Hey @Domi2015 , i need to solve a similar issue, can you please share you solution?

Thank you

7

I didn’t used slide :slight_smile: I’m just using a detail page, i.e. /app/pages/:pageID
that has a tab bar with:

  • home
  • chapter
  • prev
  • next

if you press the tab bar or if you Swipe (i capture the swipe gesture) then you change page.

If you insist that you wanna use slides i think that the trick to have nice performance is to limit the number of configured slides. However you can have a big array of data and just push/pop/slice the items of that array to map the number of slides to display in ionic 1.

8

@h45mati Sorry for the late answer.

In your controller :

function init(){
                // movies was resolved in the route
                $scope.nbslides = movies.length;
                $scope.myActiveSlide = (movies.length > 3) ? 1 : 0;
                // you don't need a buffer if 3 slides or less
                $scope.slideBuffer = $scope.nbslides > 3;
                //  which slide to display first
                var movieid = parseInt($state.params.id);
                var found = null;
                if( found = $filter('filter')(movies, {id: movieid}, true) )
                        $scope.i = movies.indexOf(found[0]);
                $scope.myViewTitle = movies[$scope.i].title;
                $scope.data.movies = [];
                $scope.oldActiveSlide = 1;
                 
                // fill the buffer
                if ($scope.slideBuffer) {
                    for (var k = -1 ; k <= 1; k++) {
                        $scope.data.movies[k+1] = angular.copy(movies[($scope.i + $scope.nbslides + k)%$scope.nbslides]);
                        $scope.data.movies[k+1] = angular.extend($scope.data.movies[k+1],{nr: ($scope.i + $scope.nbslides + k)%$scope.nbslides});
                    }
                } else {
                    for(var k = 0; k <= $scope.nbslides - 1 ; k++) {
                        $scope.data.movies.push(movies[($scope.i + k)%$scope.nbslides]);
                    }
                }
                $ionicSlideBoxDelegate.update();
    })();

$scope.slideHasChanged = function(j) {

            $scope.myViewTitle = $scope.data.movies[j].title;
            // Detect direction and modify the buffer
            if ($scope.slideBuffer) {
                  var previous_index = j === 0 ? 2 : j - 1;
                  var next_index     = j === 2 ? 0 : j + 1;
                  var direction = (($scope.oldActiveSlide - j + 2) % 3)*2 - 1;
                  $scope.oldActiveSlide = j;

                  $scope.i = $scope.data.movies[j].nr;
                  angular.copy(movies[($scope.i + $scope.nbslides + direction )%$scope.nbslides], $scope.data.movies[ (direction > 0) ? next_index : previous_index ]);
                  $scope.data.movies[ (direction > 0) ? next_index : previous_index ].nr = ($scope.i + $scope.nbslides + direction )%$scope.nbslides;
              }
        };

In your View

<ion-view view-title="{{myViewTitle}}">
  <ion-content scroll="false">
    <ion-slide-box  id="slidebox-movies" active-slide="myActiveSlide" does-continue="true" auto-play="false" on-slide-changed="slideHasChanged($index)" show-pager="false" class="has-header">
      <ion-slide ng-repeat="movie in data.movies">
          <ion-content has-bouncing="true">
        </ion-content>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>

It works smoothly for me with more than 200 slides (with images and text)
Hope this helps, let me know