Hi all, I need to show into my app a serie of images, with title and a little description. I don’t want to show a thumbnail version of these images, but a full screen version (width 100%, height auto).
Now my first version of this work use slidebox, but as I have read the performances of this feature are weak. In my Nexus 5 device swipe from one “slide” to another is slow and bad. I can not show this to my client.
So, which is the best method to show a series of images where user can see 1 image at time and see others with a swipe left/right ?
thanks.
M.
Can you share where you read about the performance? The slidebox is being updated in the next release, so that might address some of the issues that you might have heard about, but I’m still curious what the exact performance issues are. I’ve used it in many places without problem.
Alternative to the slide box, you can use a ionScroll area and design your own scrolling experience. I built an example earlier that demonstrates it, but it is not as nice to implement as slide box.
Hi, I have see the weak performance via an app that I’m writing with this html code :
<ion-view class="toursList" title="Our tours" hide-nav-bar="true">
<div class="bar bar-header bar-positive item-input-inset">
<h1 class="title">{{pageTitle}}</h1>
<button class="button button-clear" ng-click="searchSettings()"><i class="ion-search"></i></button>
</div>
<ion-content class="has-header">
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)" delegate-handle="slideTour">
<ion-slide collection-repeat="item in items" collection-item-height="50">
<div class="">
<div class="item item-text-wrap">
<a href="#/tab/tour/{{item.nid}}" ui-sref-active="active" class="" >
<div class="title2">
{{item.title}}
</div>
<img ng-src="{{item.field_immagini}}">
<div class="pfvd">
<div class="priceFrom">{{item.field_price_from}}</div>
<div class="vacationDays">{{item.field_vacation_days}}</div>
</div>
<div class="sottotitolo">
{{item.field_descrizione_breve}}
</div>
</a>
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
I have thinked that show 300+ “box” at one time was bad for performance, so I show only ten items at times. To show the next ten items I get the index and if index is in the last-1 item I replace the displayed ten items with other ten where the first is the last of the previous ten items. This is my code:
else if (index == sharedService.step) {
$ionicLoading.show();
//$scope.check = sharedService.step; //La prima volta devo passare da 9 a 10
//Devo prendere la seconda tranche
sharedService.boxIndex++;
var start = ((sharedService.boxIndex*sharedService.step))-sharedService.salt;
sharedService.salt++;
var end = start+(sharedService.boxIndex*sharedService.step)+2;
$scope.items = $scope.itemsContainer.slice(start,end);
$scope.direction = 'NN';
$timeout(function() {
$scope.$apply();
$ionicLoading.hide();
$timeout(function(){
$ionicSlideBoxDelegate.$getByHandle('slideTour').update();
$ionicSlideBoxDelegate.$getByHandle('slideTour').slide(1);
sharedService.lastIndex = 0;
});
});
}
But when I swipe from one item to the next (or to the prev) all run very slow.
I don’t do any type of working in realtime on the slidebox. CSS move the item’s fields in a “absolute” position to create a good graphical aspect for the box.
Thanks for all.
M.
300+ images is a lot, but I don’t think its primarily an issue with slidebox. That is a lot of images to load and display (and imagine if those are loaded over a cellular connection as well), which is going to take memory and slow down most anything you build. Your idea to do only a few at a time makes sense, and is somewhat like the goals of the collectionRepeat list scroller.
How much does the loading impact the performance? When you batch load 10, you might see some lag as you essentially are rebuilding the slidebox at that point.
Ultimately you could get away with having 3 (or maybe 5) slides active, one off to the left, the visible one, and one off to the right. So you could listen for when a slide changes, detect which direction, and then add and remove a slide to rebalance the slides. Perhaps that would be more performant, since then you’d only be having to load one image at a time, and if you can handle the loading of image for slides that are off screen you won’t need to use the loader to block the screen use.
Hi, I have tried it but when ionic rebuild slidebox and I need to do a .update() to rebuild it, there is a lag (white screen) that make the app not so professional.
M.
It sounds like you will want to build your own component and not use the slidebox. There are gestures for handling swipes, which you could use. I don’t know if anyone else has built something for this purpose.
Hi, no no. I don’t want to rebuild the wheel. If I could I would like to continue to use slidebox, but in this case it is not usable for a good user app. The effect when I call .update() is weak. Very very weak.
M.