Jquery Mobile：动态加载图像的弹出窗口不以第一次点击为中心答案

【问题标题】：Jquery Mobile: popup with dynamically loaded image not centered on first clickJquery Mobile：动态加载图像的弹出窗口不以第一次点击为中心
【发布时间】：2017-03-17 18:13:12
【问题描述】：

当我第一次单击链接时，弹出窗口没有居中，但第二次是。我已经关注了answers 的其他问题，说要使用'positionTo': 'window'，但无论我有没有问题都会发生。还有其他解决方案说要使用超时，但我不想使用它。

function setImage()
{
  $('#image-popup img').attr('src', 'https://upload.wikimedia.org/wikipedia/commons/7/7b/Orange-Whole-%26-Split.jpg');

  $('#image-popup img').on('load', function() {
    console.log('loaded image from click');
    $('#image-popup').popup('reposition', {'positionTo': 'window'});
  });
}

<html>
<head>

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
  
<body>

  <a href='#image-popup' data-rel="popup" data-position-to="window" onclick='setImage()'>Open image</a>

  <div id='image-popup' data-role='popup'>
    <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 class="popphoto" src="" alt="orange">
  </div>

</body>
  
</html>

请注意，如果多次运行，则需要清空缓存并硬重新加载。

【问题讨论】：

stackoverflow.com/a/26587363/1771795

标签： jquery jquery-mobile

【解决方案1】：

您在图片下载之前打开弹出窗口，没有解决方案，因为框架不知道图像的大小，因此不知道弹出窗口的大小。

请注意：如果您在 img.onload 中打开弹窗，弹窗将在正确的位置以正确的大小显示，即以图像大小居中的窗口：

  $('#image-popup img').on('load', function() {
    $('#image-popup').popup('open', {'positionTo': 'window'});
  });

所以，我认为您的问题类似于：“如何尽快打开弹出窗口 - 给用户一个反馈 - 但尺寸正确，而且图像仍在下载？ "

现在，我的建议是通过额外的 XHR 请求尽可能快地获取图像大小。显然，这也只是网络条件允许的速度，但我们总是有可能简要显示加载器，XHR 将只获取前几个字节，而不是整个图像数据。

为此，我们需要更改弹出窗口的打开方式：

HTML：

<a href='#' onclick='openPopupWithSize("https://upload.wikimedia.org/wikipedia/commons/7/7b/Orange-Whole-%26-Split.jpg"); return false;'>Open image</a>

JavaScript - 见 cmets：

// helper function to get byte value
function readByte(data, offset) {
    return data.charCodeAt(offset) & 0xff;
}
// request size, assign src, open popup & look how the image is downloading
function openPopupWithSize(pngUrl){
    // clean-up before, if we have to deal with some more images
    $('#image-popup img').attr('src', "");
    // set various parameters
    var xhr = new XMLHttpRequest();
    xhr.open("GET", pngUrl, true);
    // just get only what is strictly necessary
    xhr.setRequestHeader("range', 'bytes=0-23");
    xhr.overrideMimeType("text\/plain; charset=x-user-defined"); 
    xhr.onprogress = function(e){
        // read the few bytes needed to get width & height of the png
        var data = e.currentTarget.response;
        // offset are: 16 & 20 - see PNG specifications
        var w = readByte(data, 19) | (readByte(data, 18) << 8) | (readByte(data, 17) << 16) | (readByte(data, 16) << 24);
        var h = readByte(data, 23) | (readByte(data, 22) << 8) | (readByte(data, 21) << 16) | (readByte(data, 20) << 24);
        // set size of the container, will be reset by the framework as needed
        $('#image-popup-popup').css("width", w+"px");
        $('#image-popup-popup').css("height", h+"px");
        // assign image src like you did it in your example
        $('#image-popup img').attr('src', pngUrl);
        // finally, open the popup - JQM is allowed now to reposition correctly
        $('#image-popup').popup("open", {"positionTo": "window"});
    };
    xhr.send(null);
}

如果您需要，请随时在评论中分享您的想法。

【讨论】：

你的第一个代码 sn-p 是我最终做的。我想看看我是否可以在不添加任何 JS 代码的情况下做到这一点。为了给用户反馈，我只是在加载事件之前显示 JQM 加载器并将其隐藏在事件处理程序中。
@user2233706: 好的，如果你坚持 onload 事件，不要忘记缓存图像的修补程序：if(img.complete) img.onload(); 和 onload 函数一样，应该写在 img.src 赋值之前。