List of images are not showing on Load until I Swipe!


#1

Hello,
I have the following HTML

<div class="list">
      <div collection-repeat="post in posts" collection-item-width="50%" collection-item-height="50%">
        <img style="display: block" ng-src="{{post.thumb}}" width="100%"/>
      </div>
    </div>

My issue is when the app is first loaded,i don’t see any images until i touch the screen. Device is galaxy S3, same is happening when i debug using Chrome.
I just need to swipe the screen before the images show up.
It’s almost like a refresh/binding issue.

What could be wrong ? Thanks for your help !

Thanks !


#2

btw: it is item-width="" and item-height="" and not collection-item-[xxx]


#3

Thanks ! I tried, but still having the same issue. I need to do “something” on the screen for the images to show !


#4

Update : This happens only if i have a Side Menu. If i remove the side menu, then the images are appearing fine.
Just for trial purpose, i added this code, $ionicSideMenuDelegate.toggleLeft(false); and the images are appearing fine without touching the screen. What could be the issue ?


#5

could you share some more code? sounds like invalid domstructure.


#6

@bengtler The issue was , since i was loading the array from Parse backend, the view was loading before the results came back. So i am assuming the List view was not updating.

I had to use

$scope.loading = $ionicLoading.show({
    content: 'Loading...',
    showBackdrop: false
  }); 

before the http call and then after the array is loaded,

  $ionicLoading.hide()

This took care of the issue, now the list is showing without a “swipe”.
Hope this is the right thing to do !

Thanks !


#7

yeah but it sounds you are doing something outside the angularjs context --> so you scope gets not updated if the data is ready. The swipe --> triggers the next refresh digest of the scope and then you see your results.

strange… but if it works… it works^^


#8

Oops ! Since Parse http call was outside the angular context, i had to use $scope.apply inside the success call back and that fixed the issue.

Thanks for guiding me in the right direction !