Question

我有两页，

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

用户步骤：
1. 用户选择图像 - 确定
2. 他到达第二页并查看图像详细信息 - 确定
3. 他回到第一页使用＆＃34;返回＆＃34;在浏览器中 - 确定
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”事件。

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

1 个答案: