1

我有一个 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. 调用弹出窗口（“打开”）

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

我究竟做错了什么？

提前致谢

4

1 回答 1

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

这是演示。

于 2014-10-30T05:08:13.943 回答