jquery mobile - delay between dynamic pages transmission

Question

I have two pages,

On the first page there are images that the user can select. On the second page, the user has some info about the image he selected.

1. User steps:
   1. User select an image - OK
   2. He gets to the second page and see the image details - OK
   3. He goes back to the first page using "back" in the browser - OK
   4. He select a different image and click to see details - OK
   5. He gets to the second page but this problem is that he see for a few milliseconds the previous image and details he saw before and after few milliseconds he sees the image and details he selected - Not OK

How can i get rid of this delay between pages ?

here is my code:

 <div id='FirstPage' data-role='page'>

    <div data-role='header'>
      <h1>First Page</h1>
    </div>

    <div data-role='main'>
      <a href='#SecondPage'>See second page</a>
    </div>
  </div>

 <div id='SecondPage' data-role='page'>

    <div data-role='header'>
      <h1>Second Page</h1>
    </div>

    <div data-role='main'>
      <div id='images'></div>
    </div>
 </div>

js:

var server = "https://myserver.com";

$(document).on("pageshow","#FirstPage",function(event){

    // Get some images to select with ajax

});

$(document).on("pageshow","#SecondPage",function(event){

    // Reset the images div to remove image duplication.

    $("#images").html('');

    // Get images

    $.ajax({
        type: 'GET',
        data: image_id: image_id
        url: server + '/Api/get_images.php',
        crossDomain: true,
        dataType: 'json',
        success: function(response){
            $.each(response.data, function(i, val){
                $("#images").append("<img src="+ val.image_path +">");
            })
        },
        error: function(error){

        }
    });

});

Answer 1

Try to use the "pagebeforeshow" event. You are reseting #image after the transition animation is complete.

The "pageshow" event is triggered after the transition animation is complete.

The "pagebeforeshow" event is triggered before before the transition animation.