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

【问题标题】：Jquery occasionally returns zero height and width on imageJquery 偶尔会在图像上返回零高度和宽度
【发布时间】：2012-03-03 08:56:54
【问题描述】：

我观察到一种不寻常的行为。我有一个浮动对话框，我在其中放置图像。我想使用 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 中准备好。有什么想法吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你是对的，图片没有加载。

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

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

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

谢谢

【讨论】：

这正是我所需要的。我之前尝试过使用不同的加载方式，但显然我做错了。谢谢。

【解决方案2】：

您可以在将元素添加到 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="..." />

【讨论】：

【解决方案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; }

这就解决了问题。

【讨论】：

【解决方案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。否则，我会得到不可预知的结果，具体取决于浏览器。

【讨论】：

【解决方案5】：

图像是否曾经被隐藏，无论是display: none 还是visibility: hidden？不可见元素返回的宽度和高度均为 0。

【讨论】：

此函数中的前一行使容器 div 可见，因此它不应位于测量高度和宽度的位置。

【解决方案6】：

你得到 0 因为图像还没有加载，你可以使用 settimeout 像：

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

【讨论】：