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

【问题标题】：Getting width and height of a dynamic image获取动态图像的宽度和高度
【发布时间】：2023-04-04 14:32:01
【问题描述】：

我在隐藏的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);
 }

【问题讨论】：

标签： jquery asp.net html

【解决方案1】：

这在过去对我有用：

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/

【讨论】：

如果我们使用 this.width，答案是正确的。但它有额外的逻辑，使用 jquery 将图像加载到内存中，只需获取宽度，当它已经在 img 标签的 this.width 中可用时。但是 this.width 是我想要的确切解决方案...
啊，好吧，我实际上也误读了你的问题。很高兴 Chandresh 能够为您提供您正在寻找的答案 :)

【解决方案2】：

试试这个。

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

谢谢。

【讨论】：

【解决方案3】：

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

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()，我们确保图像在尝试获取其大小（）之前完成加载

希望这会有所帮助。干杯

【讨论】：

$("#imgFull").height() 隐藏图片时会返回0，必须使用原生js获取高度/宽度
你是对的，但有点错……但是博士。莫勒的想法给了我一个想法。实际上，当我尝试 document.getelementbyid().width 时，它在 .load() 之前不是 0。它有一个价值。因为它被隐藏了，所以 width() 给了 0。那部分绝对是太棒了。我使用原生 js 来获取宽度。对于动态加载，我删除了 src attr 并再次添加它以拒绝先前图像设置的宽度。