Question

我在隐藏的div中有一个img标记，但是当我尝试获取该img标记的高度和宽度时，它会给出0 - 0.

这是我的HTML

<div style="display:none">
  <img id="image" src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11357782_1454910574825551_630646141_n.jpg">
</div>

获取高度和宽度的jQuery

$(document).ready(function(){
  height = $('#image').height();
  width = $('#image').width();
  alert('Height: '+height+' Width: '+width);
});

CSS

#image {height:200px; width:300px;}

我希望得到200作为高度，300作为宽度，我可以通过获取元素的css来做，但#image的高度和宽度不会是静态的，它将是百分比，为此我需要在运行时获取高度和宽度，而不显示图像标记容器。

请帮帮我。感谢

Answer 1

使用jQuery的另一种解决方法：

$(function(){
    var $target = $('#image');
    $target.parent().show();
    $target.hide().on('load', function(){
        alert( $(this).width() + ', ' + $(this).height() );
        $(this).parent().hide();
        $(this).show();
    });
});

Check jsFiddle

Answer 2

您可以在Image对象

中加载img src

$(document).ready(function () {
    var img = new Image();
    img.src = $('#image').prop('src');
    img.onload = function () {
        alert("height: " + this.height + " width:" + this.width);
    };
});

DEMO

Answer 3

您可能需要使用 jQuery 方式FOUC几秒钟！如果可以，你可以使用：

$(function () {
  $("#get-image-size").show();
  a = {
    height: $("#get-image-size img").height(),
    width: $("#get-image-size img").width()
  };
  $("#get-image-size").hide();
  $("body").append(JSON.stringify(a));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="get-image-size" style="display: none;">
  <img id="image" src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11357782_1454910574825551_630646141_n.jpg" />
</div>

或者您可以在纯JavaScript ：

中使用new Image()方式

<div id="img"></div>
<script>
  var img = new Image();
  img.src = "https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/11357782_1454910574825551_630646141_n.jpg";
  img.onload = function () {
    document.getElementById("img").innerHTML = '{"height": ' + this.height + ',"width": ' + this.width + '}';
  };
</script>

如何获得高度和高度驻留在隐藏容器中的img标记的宽度

3 个答案: