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

Posted 2023-05-09

【中文标题】jquery mobile - 动态页面传输之间的延迟

【英文标题】：jquery mobile - delay between dynamic pages transmission

【发布时间】：2016-04-06 01:07:12

【问题描述】：

我有两页，

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

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

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

这是我的代码：

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

        
    );

);

【参考方案1】：

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

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

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