Question

我正在尝试从列表视图加载大尺寸图像，点击预览缩略图..

灯箱图片应居中。这么久，太好了..

现在我尝试动态加载大图像，点击相应的列表行。

理论上没问题 - 我可以动态生成完整的弹出代码，或者将img src和jquery注入到现有的弹出代码中。

但是现在，第一次点击时图像尺寸无法正确重新调整。弹出框以零大小为中心，并在加载图像内容后向右/底扩展。

如果我打开两次弹出窗口，它会正确定位！（也许是一个缓存问题？）。

我试着快速预加载大尺寸图像和其他一些调整但没有成功。

带动态图像源的弹出调用的简单jqm代码：

 $('#thumb').live('click', function() {
    var imgbig = "...";
    $("<img/>").attr("src",imgbig); // Even preloading not working
    $("#imgbig").attr("src",imgbig); // Img Tag in existing popup tag
    $("#imgPop").popup("open");
 });

我希望，你们任何一位jqm专家都能解决这个问题。谢谢你的每一个提示！

我做了一个小提琴，向你展示一个实例： Dynamic image not centered on first click

Answer 1

图像是异步加载的。恕我直言，这是导致你的问题的原因。 setTimeout可以帮助您。

但是，首先，由于您以编程方式打开弹出窗口，因此您应该更改链接（按钮）：

沟渠data-rel="popup"
设置href="#"

所以它看起来像：

<a href="#" id="thumb">Open image!</a>

其次更改点击处理程序：

$('#thumb').live('click', function() {
    var imgbig = "http://www.csunas.org/uploads/beautifull-grand-canyon.jpg";
    $("#imgbig").attr("src", imgbig);
    setTimeout(function(){
        $("#imgPop").popup("open");
    }, 100); 
    return false;
});

我已更新您的jsFiddle

Answer 2

谢谢peterm，

我现在这样做：

var img = new Image();
$(img).bind('load', function(e) {
    $("#imgbig").attr("src",imgbig);
    $.mobile.hidePageLoadingMsg(); // Hide spinner
    $("#imgPop").popup("open");
});
img.src = imgbig;
$.mobile.showPageLoadingMsg(); // Show spinner until image is loaded

现在，在加载方法之间启动popup.open之前，将加载图像。

JQuery Mobile - listview弹出图片 - ＆gt;不以第一次点击为中心

2 个答案: