New card shows images from previous card after swipe

Question

After swiping (as demonstrated in the video below) the images from the previous card flash for a little bit, which is pretty annoying and looks ugly as hell. Any suggestions/ideas to fix this? Thanks in advance!

Example video (because it's the only way to explain the problem)

https://www.youtube.com/watch?v=44fFZrU83qk

Answer 1

Your process is the following : - initiate controller : value of Loading = false + getDatas (initiate image) - if user Swipe, then, getNewDatas

while getting newDatas, your are not "cleaning" your current datas, and, therefore, the image remains the same UNTIL the promise that initiate the image is done.

You have 2 solutions now : - or you wait for the promise that initiate the image to be done - or you clean your datas while "swipe"

If you clean, It's probable that you'll have a small blank image BEFORE the promise is done, therefore, I suggest you to wait for the promise of the image to be done before finishing the loading.

Your solution shall be therefore linked to that function

$scope.change_image = function($event){
      angular.element(document.getElementById('main_image')).attr("src", angular.element($event.target).attr('src'));  
  };

Where do you call it ? how ? I coulnd't find any clue in your pastbin

Answer 2

Is there a particular reason you're not using the tinder-cards ion? It could make your life a bit simpler.

Whether or not you use it, you could directly launch request for two cards' data (and preload images) on app launch, so that when Card1 is swiped, you can directly show Card2 (without having to request any data), and at the same time launch a request for a third card's data to get ready for the next swipe.