Performance issue with displaying SDCard images like Gallery in Android

ionic-v1
1

Hi,

I’m new to Ionic and I’m trying to displaying images from phone memory (and sdcard) in a Gallery like format - eg Grid with 3 columns. Below is the code that I came up with and I’m having few performance / user experience issues.

View

          <div class="row" ng-repeat="image in allImages" ng-if="$index % 3 === 0">
              <div class="col col-33" ng-if="$index < allImages.length">
                  <img ng-src="{{allImages[$index]}}"  class="image-list-thumb" ng-click="showImages($index)"/>
              </div>
              <div class="col col-33" ng-if="$index + 1 < allImages.length">
                  <img ng-src="{{allImages[$index + 1]}}" class="image-list-thumb" ng-click="showImages($index +1)"/>
              </div>
              <div class="col col-33" ng-if="$index + 2 < allImages.length">
                  <img ng-src="{{allImages[$index + 2]}}"  class="image-list-thumb" ng-click="showImages($index +2)" />
              </div>               
          </div>

Controller

               fs.getImagesNew2().then(function(results){
			$scope.allImages.length = 0; //clear existing array;
			for (var i = 0; i < results.length; i++) {
		        //console.log('Image URI: ' + results[i]);			        
				$scope.allImages.push(results[i]);
				
			}
                           $ionicLoading.hide();
		}, function(error){
			 $ionicLoading.hide();			
		});

Here are my questions-

  1. I’m using cordova.file.externalRootDirectory for getting the sdcard path this works in mobiles with internal memory and no slot for sdcard. However, this returns internal path only for phone with external sdcard. Not sure if I need to use someother path.?

  2. above code works fine for 10 to 25 images. However, if I have around 100+ images then my app crashes. I thought it could be due to too many images binding to UI and causes app to crash. So I used the Lazyload - https://github.com/paveisistemas/ionic-image-lazy-load . This is working but User experience is not good at all. Screen always gets struck for couple of seconds below scrolling down. Could you please advise if I’m doing something wrong. I have been struggling for the past one week on the same issue.

Thanks
Sai

2

I. First check if smartphnone has an external sd card:

window.requestFileSystem

Load your source depending on it.

II. Try doing this a little bit different, instead of using lazy loader create your own pagination system using Slide Box. Also remove images from non-active slides, it will clean the DOM. Worst case scenario check plugin called: Ion Gallery, you can easily implement pagination into it.

Find it here: http://www.gajotres.net/must-have-plugins-for-ionic-framework/5/

3

Thanks Gajotres,

For First question, you mentioned to use window.requestFileSystem, do you mean to loop through all the entries returned by the FileSystem and look for extSdCard folder? I assume that Ionic dont have the android equivalent of Environment.getExternalStorageDirectory.

For the second one, you mentioned to use pagination for Slide box. and remove images from non-active slides. Could you please point to place where I could read on how that can be done or similar example.

Once again thank you for all the great work.

4

I dont know what kind of phone you have, but if it is a newer phone, those images are HUGE and are taking up a lot of memory to scale appropriately to be rendered in the view.

5

Yes, I got newer phone. Its one plus one.

Sorry I didn’t get what you are suggesting. Are you suggesting to reduce image quality in my camera so that all images are of low quality ?

6

no i am suggesting that you show lower resolution images in the image gallery and only show the high resolution one when user selects a specific image

7

I’m ending up with same issue when I open fullscreen (with high quality images) as I’m using slidebox and loading 100+ images of high quality is causing the DOM to crash. :worried: