Jquery 移动设备：带有动态加载图像的弹出窗口在第一次点击时不居中

Question

当我第一次点击link时，弹出窗口没有居中，但第二次是。我已经按照 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>

请注意，如果您运行多次执行此操作，则需要清空缓存并重新加载。

Answer 1

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

请注意：如果您在 img.onload 中打开弹出窗口，弹出窗口将以正确的尺寸显示在正确的位置，即以图像尺寸 window 为中心:

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

所以，我认为你的问题是这样的："How to open the popup as fast as possible - to give the user a feedback - but with the correct size, and moreover while the image is still downloading?"

现在，我的建议是通过额外的 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 - 查看评论：

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

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

Jquery 移动设备：带有动态加载图像的弹出窗口在第一次点击时不居中

Jquery Mobile: popup with dynamically loaded image not centered on first click

jquery

jquery-mobile