Jquery Mobile 弹出窗口在第一次单击时未居中

Question

我在将 jQuery Mobile 弹出窗口居中时遇到一个令人困惑的问题。当我第一次单击它时，它没有居中并出现在我的页面的一角。关闭并再次打开后，它突然居中。

这是我的代码:

$(document).on("pageshow",function(){
  $('.image_link').on('click', function(event){
    var id = $(this).children('img').attr("id");
    $("#show_image_img").attr("src",sPath + "/view/images/" + id);
    $("#show_image").popup('open');
    $("#show_image" ).popup({ positionTo: "window" });
  });
});

这是我的 html 代码

<div data-role="popup" id="show_image" data-theme="c" class="ui-corner-all">
  <div style="padding:20px 30px;">
    <img id="show_image_img" src="" />
  </div>
</div>

有人知道如何解决这个问题吗？我已经尝试过各种方法，例如将 pageshow 事件更改为 pagebeforeshow 等等。

Answer 1

我相信第一次单击时，弹出窗口会在图像完全下载之前加载，因此它不知道用于定位的大小。因此，左上角居中。

如果您提前知道图像大小，则可以通过 CSS 预先调整弹出窗口中的 IMG 标签的大小

如果页面上没有太多图片，您可以尝试预加载它们

您还可以在弹出窗口上添加一个小的 setTimeout 延迟，以允许图像下载完成:

$(document).on("pageshow", function () {
    $('.image_link').on('click', function (event) {
        $("#show_image_img").attr("src", "http://www.aai.ee/planets/nineplanets/gif/SmallWorlds.jpg");

        setTimeout(OpenPopup, 50);
    });
});

function OpenPopup(){
    $("#show_image").popup({ positionTo: "window" }).popup('open');
}