Question

我在隐藏的div中嵌入了img标记。当用户点击具有图像名称的动态超链接时，必须在模态窗口中显示图像。要将div定位在模态窗口内，需要图像高度。但是当单击超链接时，在分配src之后，高度将变为0.因此图像不能在中间对齐。请帮助我在浏览器显示之前获取图像的宽度。

<div id="imgFullView" class="modal_window imgFullView">
    <img alt="Loading..." id="imgFull" />
</div>

function ShowImage(imgSrc) {
    $("#imgFull").attr("src", imgSrc);
    alert($("#imgFull").height());
    $("#imgFullView").width($("#imgFull").width());
    $("#imgFullView").height($("#imgFull").height());
    show_modal('imgFullView', true);
}

这个showimage方法将被调用超链接。在此先感谢...

毕竟你的专业指导对我有用的解决方案......

 function ShowImage(imgSrc) {
    $("#imgFull").removeAttr("src"); //To remove the height and width of previously showed imaged from img tag.
    $("#imgFull").attr("src", imgSrc);
    $("#imgFullView").width(document.getElementById("imgFull").width);
    $("#imgFullView").height(document.getElementById("imgFull").height);
    show_modal('imgFullView', true);
 }

Answer 1

试试这个。

    var img = $("imgFull")[0]; // Get my img elem
    var real_width, real_height;
    $("<img/>") // Make in memory copy of image to avoid css issues
        .attr("src", $(imgFull).attr("src"))
        .load(function() {
            real_width = this.width;   // Note: $(this).width() will not
            real_height = this.height; // work for in memory images.
        });

感谢。

Answer 2

嗯，问题是您无法知道尚未加载的图像的大小。试试这个：

function ShowImage(imgSrc) {
  $("#imgFull").attr("src", imgSrc);
  $("#imgFull").load(function(){  //This ensures image finishes loading
     alert($("#imgFull").height());
     $("#imgFullView").width($("#imgFull").width());
     $("#imgFullView").height($("#imgFull").height());
     show_modal('imgFullView', true);
  });
}

使用.load()，我们确保图像在尝试获取其大小（）

之前完成加载

希望这会有所帮助。干杯

Answer 3

过去这对我有用：

function ShowImage(imgSrc){
 $('<img id="imgFull" />').bind('load',
    function(){
        if ( !this.complete || this.naturalWidth == 0 ) {
            $( this ).trigger('load');      
        } else {
            $( this ).appendTo('#imgFullView')
$('#imgFullView').width(this.naturalWidth).height(this.naturalHeight);
        }    
    }).attr("src",imgSrc);   
}

$(document).ready(function(){ ShowImage('http://www.google.com/images/logos/ps_logo2.png') });

演示：

http://jsfiddle.net/jyVFc/4/

获取动态图像的宽度和高度

3 个答案: