Jquery-Mobile：弹出窗口，动态加载的图像在第一次单击时不居中

当我第一次单击链接时，弹出窗口不是居中，而是第二次居中。我遵循了其他一些问题，比如使用

'positionTo'：'window'

，但无论我是否拥有它，问题都会发生。还有其他的解决方案说使用超时，但我不想使用它

函数setImage（）
{
$（'#图像弹出img'）.attr（'src'，'https://upload.wikimedia.org/wikipedia/commons/7/7b/Orange-Whole-%26-Split.jpg'）；
$（“#图像弹出img”）。在（'load'，function（）上{
log（'从单击加载的图像'）；
$（“#图像弹出”）.popup（'resposition'，{'positionTo'：'window}）；
});
}

---

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

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

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

因此，我认为你的问题是：“如何尽可能快地打开弹出窗口-向用户提供反馈-但大小正确，而且图像仍在下载？”

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

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

HTML:

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

//获取字节值的helper函数
函数readByte（数据，偏移量）{
返回数据.charCodeAt（偏移量）&0xff；
}
//请求大小、分配src、打开弹出窗口&查看图像下载情况
函数openPopupWithSize（pngUrl）{
//如果我们要处理更多的图像，请在之前进行清理
$（“#图像弹出img”）.attr（'src'，”）；
//设置各种参数
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，pngUrl，true）；
//只要得到严格必要的东西
setRequestHeader（“范围”，“字节=0-23”）；
xhr.overrideMimeType（“text\/plain；charset=x-user-defined”）；
xhr.onprogress=函数（e）{
//读取获取png宽度和高度所需的几个字节
var数据=e.currentTarget.response；
//偏移量为：16和20-参见PNG规范
var w=readByte（数据，19）|（readByte（数据，18）您的第一个代码片段就是我最后要做的。我想看看是否可以在不添加任何JS代码的情况下完成此操作。为了给用户反馈，我只需在load事件之前显示JQM加载程序，并将其隐藏在事件处理程序中。@user2233706:好的，如果您坚持使用onload事件，请不要忘记缓存图像的修补程序：
if（img.complete）img.onload（）；
与onload函数一样，应在img.src赋值之前写入。
// 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);
}