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

我有一个嵌入隐藏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方法将被称为onclick的超链接。在此先感谢...这工作对我来说，乌拉圭回合后所有专业指导

解决方案...

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

来源

2011-07-07 Raghav

试试这个。

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

谢谢。

来源

2011-07-07 05:51:02 Chandresh

嗯，问题是，你可以不知道的不是招图像的大小尚未装入。试试这个：

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

随着我们保证图像完试图得到它的大小（）

希望这有助于之前加载。干杯

来源

2011-07-07 05:48:58

$（ “＃imgFull”）高度（）将返回0，当图像被隐藏，你必须使用原生js来获得高度/宽度 –

你是正确的，但有点错误..但DR。莫尔的想法给了我一个主意。实际上，当我尝试document.getelementbyid（）。宽度时，在.load（）之前它不是0。它有一个价值。因为它是隐藏的，所以width（）给出了0.这个部分绝对是太棒了。我用本地js来获取宽度。而对于动态加载，我已经删除了src attr并再次添加它来拒绝由preivous图像设置的宽度。 – Raghav

这为我在过去的工作：

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/

来源

2011-07-07 06:08:04

谢谢...但这个.naturalWidth在IE中是未定义的.. – Raghav

如果我们使用this.width，答案是正确的。但它有额外的逻辑加载图像在内存中使用jquery只是抓住宽度，当它已经在img标签的this.width。但是，this.width是我想要的确切解决方案... – Raghav

啊，好吧，我其实也误读了你的问题。很高兴Chandresh能够给你你正在寻找的答案，虽然:) –

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

回答

相关问题