Jquery mobile - delay between the transfer of dynamic pages

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 information about the image he has selected.

• User Response:
  • User selects image - OK
  • He gets to the second page and sees the image details - OK
  • It returns to the first page, using the "back" in the browser - OK
  • He selects another image and clicks to see the details - OK
  • He gets to the second page, but this problem is that he sees a few milliseconds of the previous image and the details that he saw before and after a few milliseconds he sees the image and the details that he has 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 using the "pagebeforeshow" event. You forward #imageafter the transition animation is complete.

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

Event "pagebeforeshow" starts up before the transition animation.