jquery mobile-动态页面传输之间的延迟

我有两页

在第一页上，用户可以选择图像。 在第二页，用户有一些关于他选择的图像的信息

用户步骤：

用户选择图像-确定

他进入第二页并查看图像细节-好的

他在浏览器中使用“后退”返回到第一页-确定

他选择一个不同的图像并单击以查看详细信息-确定

他进入了第二页，但问题是他在几毫秒内看到了之前和之后看到的前一幅图像和细节 几毫秒后，他看到了他看到的图像和细节 已选择-不正常

如何消除页面之间的延迟

这是我的密码：

 <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服务器=”https://myserver.com";
$（文档）。在（“pageshow”、“FirstPage”上，函数（事件）{
//使用ajax获取一些要选择的图像
});
$（文档）。在“页面显示”、“第二页”上，函数（事件）{
//重置图像div以删除图像复制。
$（“#图像”）.html（“”）；
//获取图像
$.ajax({
键入：“GET”，
数据：图像id：图像id
url:server+'/Api/get_images.php'，
跨域：是的，
数据类型：“json”，
成功：功能（响应）{
$.each（response.data，function（i，val）{
$（“#图像”）。追加（“”）；
})
},
错误：函数（错误）{
}
});
});

尝试使用“pagebeforeshow”事件。过渡动画完成后，您将重置图像

过渡动画完成后，将触发“pageshow”事件

“pagebeforeshow”事件在过渡动画之前触发

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){

        }
    });

});