jquery mobile image Popup中的对齐问题

Question

我有一个 ID 为 popupBasic 的 div，用于 Jquery Mobile 中的弹出窗口

<div data-role="popup" id="popupBasic">
      <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img id="imgView" />
</div>

为了打开按钮上的弹出窗口，请单击btnViewPopup，使用以下代码。

function btnViewPopup() {
    try {
        if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined") {
            Notify(22);
        }
        else {
            var source = localStorage.imageURL
            $("#imgView").attr('src', source);
            $("#popupBasic").popup("open");
        }
    }
    catch (err) {
    ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
    }
}

当前实现

1. 有一个用于图像列表的单选按钮列表。
2. 如果选择其中一个，则其图像 URL 将存储在本地存储中。
3. 点击查看按钮时，将imgView的src设置为localstorage中的值
4. 调用弹窗（“打开”）

我的问题是第一次单击查看按钮时，显示的图像很小并且它与右中对齐。下次当我打开另一个或相同的图像时，它会像我预期的那样显示完整。 我没有给出图像的高度和宽度，因为不同的图像可能会有所不同。

我做错了什么？

提前致谢

Answer 1

在知道图像尺寸之前显示您的弹出窗口。图片加载完成后可以打开弹窗，如下：

• CSS：

  #imgView
  {
      width: 100%;
      height: 100%;
  }
  

• JS：

  function btnViewPopup() {
      localStorage.imageURL = 'http://www.elated.com/res/Image/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/themes.jpg';
  
      try {
          if (localStorage.imageURL == undefined || localStorage.imageURL.length == 0 || localStorage.imageURL == "undefined") {
              Notify(22);
          }
          else {
              var source = localStorage.imageURL;
              $("#imgView").attr('src', source);
  
              $("#imgView").one("load", function() {
                  $("#popupBasic").popup("open");
              }).each(function() {
                  if (this.complete) {
                      $(this).load();
                  }
              });
          }
      }
      catch (err) {
          ErrorMessageDB("Issue Attachments", "btnAttViewClick", "", "click-to view attachment", err.message, localStorage.EmployeesKId4LastModifiedBy);
      }
  }
  

这里是DEMO。