Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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

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

所以，我认为你的问题是这样的：＆＃34;如何尽快打开弹出窗口 - 给用户一个反馈 - 但是尺寸正确，而且图像是还在下载？＆＃34;

现在，我的建议是通过额外的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 Mobile：弹出动态加载的图像不会在第一次点击时居中

1 个答案: