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

Question

我有两页，

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

1. 用户步骤：
   1. 用户选择图像 - 确定
   2. 他进入第二页并查看图像详细信息 - 好的
   3. 他在浏览器中使用“返回”返回到第一页 - 好的
   4. 他选择了一个不同的图像并点击查看详细信息 - 确定
   5. 他到了第二页，但问题是他在几毫秒内看到了他之前看到的上一张图像和细节， 几毫秒后，他看到了他所看到的图像和细节 已选择 - 不正常

我怎样才能摆脱页面之间的这种延迟？

这是我的代码：

 <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

尝试使用“pagebeforeshow”事件。过渡动画完成后，您正在重置 #image。

在过渡动画完成后触发“pageshow”事件。

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