Question

我正在观察一种不寻常的行为。我有一个浮动的对话框，我在其中放置一个图像。我想使用jquery获取图像大小，并将其div容器调整为适当的大小。它工作得相当好，但该功能偶尔会返回零作为图像大小。

$('#dialogueContainer').html('<div class="dialogue"><img src="/photos/' + file + '" id="lightImage" /></div>');

var imageHeight = $('#lightImage').height();
var imageWidth = $('#lightImage').width();

console.log(imageHeight + 'x' + imageWidth); //<-- This occasionally returns "0x0"

我怀疑当jquery尝试测量它的高度和宽度时，图像可能没有在DOM中准备好。有什么想法吗？

Answer 1

在将元素添加到DOM之前，可以将load事件处理程序绑定到元素，以便在可用时获取宽度/高度。您还可以使用CSS或内联属性明确设置图像的宽度/高度。

//create an img element, passing attribute values as we do, then bind an event handler to the `load` event for the image
var $img = $('<img />', { src : '/photos/' + file, id : 'lightImage' }).on('load', function () {

    //now that the image has loaded we can be sure the height/width values we receive are accurate
    var imageHeight = $(this).height(),
        imageWidth  = $(this).width();

    console.log(imageHeight + 'x' + imageWidth);
});

//now change the HTML of the container, emptying the container, then appending a div element with the `dialogue` class which also has a child img element (our image from above)
$('#dialogueContainer').html($('<div />', { class : 'dialogue' }).html($img));

我喜欢在将load事件处理程序添加到DOM或更改它的源之前将其绑定到该元素，这样您就知道当图像实际加载时load事件已到位（可以从缓存快速发生。）

请注意.on()是jQuery 1.7中的新功能，在这种情况下会替换.bind()（早期版本）。

更新

我想强调的是，如果您知道图像的尺寸，则应明确声明它们（这是更快浏览器渲染的最佳做法）：

<img width="100px" height="200px" src="..." />

Answer 2

你没错，图片没有加载。

最糟糕的是，在IE中，有时报告的大小类似于40x60（图像未加载时看到的小图标）。

jQuery报告load事件可以与图像一起使用： http://api.jquery.com/load-event/

我很久以前尝试过解决这个问题，跨浏览器，最后轮询图像大小以触发自定义“加载”事件。

由于

Answer 3

我有这个问题试图获得包含段落的<div>的高度，这不是因为内容没有加载 - 我尝试在click上警告它的高度所以我可以肯定它是第一个并且仍然得到0返回。结果是css问题我使用clear hack为它添加了一个明确的类：

.clear { display:inline-block; }   
.clear:after, .container:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clear { height:1%; }
.clear { display:block; }

这就解决了。

Answer 4

我相信你是对的。尝试在图像加载后记录图像的宽度和高度：

var $img = $('<img />');

$img.load(function(){
  var imageHeight = $('#lightImage').height();
  var imageWidth = $('#lightImage').width();

  console.log(imageHeight + 'x' + imageWidth);  
});

$img.attr('src', '/photos/' + file);

注意我在将事件处理程序绑定到映像后设置了src。否则，我有不可预知的结果，具体取决于浏览器。

Answer 5

图像是否曾被display: none或visibility: hidden隐藏？不可见元素的宽度和高度为0。

Answer 6

您将获得0，因为尚未加载图片，您可以使用settimeout：

setTimeout(function () { // your code goes here var imageHeight = $('#lightImage').height(); var imageWidth = $('#lightImage').width(); },2000);

Jquery偶尔会在图像上返回零高度和宽度

6 个答案:

更新