# Performance issue with displaying SDCard images like Gallery in Android

**URL:** <https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531>\
**Category:** ionic-v1\
**Created:** [July 30, 2015, 7:28am UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531 "2015-07-30T07:28:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![saisworld](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@saisworld](https://forum.ionicframework.com/u/saisworld)\
**Post date:** [July 30, 2015, 7:28am UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/1 "2015-07-30T07:28:02Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![Gajotres](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gajotres/32/98564_2.png) [@Gajotres](https://forum.ionicframework.com/u/Gajotres)\
**Post date:** [July 30, 2015, 7:56am UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/2 "2015-07-30T07:56:02Z")

</div>

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/](http://www.gajotres.net/must-have-plugins-for-ionic-framework/5/)

---

<div class="post-metadata">

**Author:** ![saisworld](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@saisworld](https://forum.ionicframework.com/u/saisworld)\
**Post date:** [July 30, 2015, 3:10pm UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/3 "2015-07-30T15:10:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [July 30, 2015, 6:17pm UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/4 "2015-07-30T18:17:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![saisworld](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@saisworld](https://forum.ionicframework.com/u/saisworld)\
**Post date:** [July 31, 2015, 8:06pm UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/5 "2015-07-31T20:06:50Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [August 1, 2015, 1:33pm UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/6 "2015-08-01T13:33:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![saisworld](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@saisworld](https://forum.ionicframework.com/u/saisworld)\
**Post date:** [August 2, 2015, 9:27pm UTC](https://forum.ionicframework.com/t/performance-issue-with-displaying-sdcard-images-like-gallery-in-android/29531/7 "2015-08-02T21:27:31Z")

</div>

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. 😟