1

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

灯箱图像应居中。好久不见好。。

现在我尝试通过单击相应的列表行来动态加载大图像。

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

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

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

我尝试动态预加载大尺寸图像和其他一些调整，但没有成功。

带有动态图像源的popup调用的简单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专家都可以解决这个问题。谢谢你的每一个提示！

我做了一个 Fiddle 给你看一个活生生的例子： Dynamic image not centered on first click

4

2 回答 2

2

图像正在异步加载。恕我直言，这就是导致您的问题的原因。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

于 2013-01-09T00:33:43.307 回答
0

谢谢彼得，

我现在这样做：

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中间加载方法之前加载图像。

于 2013-01-09T16:11:19.400 回答