Memory issue with slide-box and scrollable content

mhartington · September 30, 2014, 3:07pm

Can’t really say unfortunately

pierre · September 30, 2014, 4:33pm

Ok understood. So I guess I’ll take the assumption that we’re talking at least a number of weeks and push my app for approval at Apple and work on updating once the RC including the new slide box is available…

Thanks!

Javier · October 2, 2014, 9:32am

Same problem here, my App crashes in iOS after several memory warnings.

Looking forward to the update of the slide-box!

mhartington · October 8, 2014, 7:55pm

Alright guys…the moment is here…

github.com/ionic-team/ionic

fix(slidebox): refactor for performance and stability

Closes #2336. Closes #2317. Closes #2290. Closes #2228. Closes #2067.
Closes #1890. Closes #1865. Closes #1850. Closes #1755. Closes #1688.
Closes #1578. Closes #1501. Closes #1353. Closes #1342. Closes #782.
Closes #416. Closes #2288.

BREAKING CHANGE: The slideBox's API has undergone many changes.

- **`<ion-slide-box>`** attributes have changed (see
  [documentation](http://ionicframework.com/docs/api/directive/ionSlideBox)):

  * `active-slide` has changed to `selected`. Change your code from
  this:

    ```html
    <ion-slide-box active-slide="activeSlideIndex"></ion-slide-box>
    ```

    To this:

    ```html
    <ion-slide-box selected="activeSlideIndex"></ion-slide-box>
    ```

  * `does-continue` has changed to `loop`.  Change your code from this:

    ```html
    <ion-slide-box does-continue="shouldLoop"></ion-slide-box>
    ```

    To this:

    ```html
    <ion-slide-box loop="shouldLoop"></ion-slide-box>
    ```

  * `auto-play` and `slide-interval` have been merged into `auto-play`.
  Change your code from this:

    ```html
    <!-- autoPlay is on -->
    <ion-slide-box auto-play="true" slide-interval="1000">
    </ion-slide-box>
    <!-- autoPlay is off -->
    <ion-slide-box auto-play="false" slide-interval="1000">
    </ion-slide-box>
    ```

    To this:

    ```html
    <!-- autoPlay is on -->
    <ion-slide-box auto-play="1000"></ion-slide-box>
    <!-- autoPlay is off -->
    <ion-slide-box auto-play="false"></ion-slide-box>
    ```

  * `show-pager` and `pager-click` have been removed. Use
  a child `<ion-slide-pager>` element. See the [`ion-slide-pager`
  documentation](http://ionicframework.com/docs/api/directive/ionSlidePager).
  Change your code from this:

  ```html
  <!-- pager using default click action -->
  <ion-slide-box show-pager="true">
  </ion-slide-box>
  <!-- pager with custom click action -->
  <ion-slide-box show-pager="true" pager-click="doSomething(index)">
  </ion-slide-box>
  ```

  To this:

  ```html
  <ion-slide-box>
    <!-- pager using default click action -->
    <ion-slide-pager></ion-slide-pager>
  </ion-slide-box>
  <ion-slide-box>
    <!-- pager with custom click action -->
    <ion-slide-pager ng-click="doSomething(index)"></ion-slide-pager>
  </ion-slide-box>
  ```

- **`$ionicSlideBoxDelegate`** methods have changed (see
  [documentation](http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate)):

  - `update()` has been removed. slideBox updates on its own now.

  - `stop()` has been removed. See `autoPlay()` below.

  - `start()` hass been removed. See `autoPlay()` below.

  - `slide(newIndex[, speed])` has been renamed to `select(newIndex[,
    speed]);

  - `currentIndex()` has been renamed to `selected()`.

  - `slidesCount()` has been renamed to `count()`.

  - New method `$ionicSlideBoxDelegate.autoPlay()`. Change your code
    from this:

    ```js
    // stop auto sliding
    $ionicSlideBoxDelegate.stop();
    // later... start auto sliding
    $ionicSlideBoxDelegate.start();
    ```

    To this:

    ```js
    var autoPlaySpeed = 3000; //wait 3000 seconds between changing slide
    // stop auto sliding
    $ionicSlideBoxDelegate.autoPlay(false);
    // later... start auto sliding
    $ionicSlideBoxDelegate.autoPlay(autoPlaySpeed);
    ```

  - `previous()` now returns the index of the previous slide and does
    not select. Change your code from this:

    ```js
    // select previous slide
    $ionicSlideBoxDelegate.previous();
    ```

    To this:

    ```js
    // select previous slide
    $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.previous() );
    ```
  - `next()` now returns the index of the next slide and does
    not select. Change your code from this:

    ```js
    // select next slide
    $ionicSlideBoxDelegate.next();
    ```

    To this:

    ```js
    // select next slide
    $ionicSlideBoxDelegate.select( $ionicSlideBoxDelegate.next() );
    ```

by ajoslin on 10:08PM - 24 Sep 14

changed 26 files with 1499 additions and 991 deletions.

Big changes to slide box in the nightly builds. Would you all be able to test it out and report any errors?

henrik242 · October 9, 2014, 4:35pm

Looking much better! My 200 KB book now takes up only approx 90MB in the iOS simulator

I still reckon this is a lot of memory to use, but whether it has anything to do with the Slide-box, I cannot say just now.

Will test on device right after dinner

Edit:
Tested on my iPad, and it’s even better. It takes up 30-35 MB and does not crash. This is a very exciting update - thanks a lot @mhartington et al

pierre · October 9, 2014, 6:41pm

yay, thanks @mhartington !!

iwantwin · October 9, 2014, 8:28pm

I’m seeing similair improvements

mhartington · October 9, 2014, 8:38pm

You guys have no idea how happy I am to hear this

If there are any errors, please note them in the PR

iwantwin · October 9, 2014, 10:55pm

@mhartington Will do… For your happiness, you can surely ask your colleagues at the office to record a video of you dancing on a table If you share a video like that, and embed it in a post you make, we will finally have an idea of how happy that makes you ^^

~I would really enjoy such a video anyways~

(@andy maybe you could shoot the vid? just a suggestion fo course ;))

olgagr · January 5, 2015, 3:57pm

Any news if this improved implementation of slidebox is somewhere available ? I have an memory warning with 22 elements in slidebox My ionic version is 1.0.0-beta.13 and slidebox still loading all elements in collection.

tobbe · January 5, 2015, 4:19pm

Upgrade to beta 14! There has been some api changes though I think

olgagr · January 5, 2015, 5:12pm

Thanks @tobbe ! I’ll try that. For everybody looking for this update: here are changes in slidebox api: https://github.com/driftyco/ionic/blob/v1.0.0-beta.14/CHANGELOG.md#breaking-changes

olgagr · January 7, 2015, 1:12pm

@tobbe I updated to version 14 (with bower update) but to be honest don’t see any changes in Slidebox behaviour. As I see in the source code the API doesn’t changed
Geez, how should I update existing project ? I just did:

I’ve changes version in bower.json to driftyco/ionic-bower#1.0.0-beta.14
I’ve made bower update

I don’t understand. This is the source code of beta 14 for slidebox. It doesn’t change!

github.com

ionic-team/ionic/blob/v1.0.0-beta.14/js/angular/directive/slideBox.js


/**
 * @ngdoc directive
 * @name ionSlideBox
 * @module ionic
 * @delegate ionic.service:$ionicSlideBoxDelegate
 * @restrict E
 * @description
 * The Slide Box is a multi-page container where each page can be swiped or dragged between:
 *
 * ![SlideBox](http://ionicframework.com.s3.amazonaws.com/docs/controllers/slideBox.gif)
 *
 * @usage
 * ```html
 * <ion-slide-box on-slide-changed="slideHasChanged($index)">
 *   <ion-slide>
 *     <div class="box blue"><h1>BLUE</h1></div>
 *   </ion-slide>
 *   <ion-slide>
 *     <div class="box yellow"><h1>YELLOW</h1></div>

This file has been truncated. show original

chenjiale · May 12, 2015, 10:20am

Hi which version ionic add those changes.I have the issue too,the version i used is 1.0.0-rc.5,i create a slidebox with 15 item .everytime i slide the slidebox ,i put a img in current item like this

 <ion-slide-box show-pager="true" on-slide-changed="slideChanged(index)">
          <ion-slide ng-repeat="item in data.slides"> 
                    <ion-content  >
                  <ion-scroll >
                    <img class="page-content" ng-src="{{item.url}}"  >
                  </ion-scroll>
                  </ion-content>
          </ion-slide>
        </ion-slide-box>

i find that nearly 10M memeory add in the chrome when a add a new img ,i test to ng-if the img that i have read,but the memory is not be freed.

chenjiale · May 13, 2015, 12:42pm

Which version i can use those ?

biswarup · May 22, 2015, 1:49pm

Hi all,

I am also facing similar problems with ion-slide-box. I have raised a query in the forum Ionic slide-box crash on iPads

I have put sample app which shows the crash on the latest ionic version v1.0.0

In our actual product, we have to create ionic slide-boxes dynamically with 3-5 ion-slides. Each ion-slide item has either an ng-repeat or a collection-repeat or an iframe drawing a chart on canvas. Once the data set increases, the app simply crashes on rotation or when we are inside a slide-box and trying to delete the existing one and create a new one.

Such crashes are not noted on lower screen-size devices like iPhone and iPad Mini.

It looks like ionic slide-box is using a lot of memory internally and may also be trigering invalid memory access.

@mhartington Is there any fix available in nightly builds? Its extremly important for us to have a working solution now

Tues79 · February 13, 2018, 9:04am

Could you please share full codes?

Topic		Replies	Views
Received memory warning and closes the application ionic-v1	4	1527	January 5, 2015
iOS Recieved Memory Warning- then terminated due to Memory Pressure	12	18901	July 11, 2015
Memory error iOS ionic-v1	8	1394	November 6, 2014
Memory management in ionic list and slide boxes?	1	883	February 17, 2017
Ionic slide-box crash on iPads ionic-v1	2	2265	May 26, 2015

Memory issue with slide-box and scrollable content

Related topics