Question

我真的很奇怪。我正在尝试使用以下方式获取图像的宽度和高度：

创建一个图片代码并将.src添加到其中。
将此图片标记添加到document.body。
使此图片代码可见（显示：内联）。
获取元素的.offsetWidth和.offsetHeight。
隐藏图片标签（显示：无）;

所有这一切都是使用JS完成的，它在我的本地主机上工作得非常好，但当我将网站上传到我的客户端托管服务提供商时，我感到很惊讶。 offsetWidth和.offsetHeight在步骤4中为0.为什么会这样？我认为在第4步之前我需要某种“冲洗”，但我不确定。有什么建议？谢谢。

Answer 1

这可能是由于图像尚未加载造成的。尝试这样的事情：

img.onload = function() {
  // get the offsetWidth and offsetHeight
}

Answer 2

您必须等待图像实际加载到网络上。您无需将该事物添加到DOM中：

var img = new Image();
img.onload = function() {
  handleImageSize(this.width, this.height);
};
img.src = "http://whatever.com/your/img.jpg";

在这里，“handleImageSize”将是您编写的函数，用于处理图像尺寸所需的任何操作。

Answer 3

正如其他答案所示，是由于图像没有被DOM完全加载。这在我的本地服务器上正常工作，因为我怀疑你是在本地加载图像，这意味着它们几乎是即时的;然而，在将它们移动到服务器之后会有一点延迟。这是一个容易被忽视的问题，很容易解决。

其他答案可以解决问题;但这里是jQuery版本，为了参数

var img = $('<img>', {
    src: 'http://dummyimage.com/150/000/fff.gif'
}).one('load', function() {
    var offsets = $(this).offset();
});

$('body').append(img);

Javascript慢慢“刷新”DOM树

3 个答案:

jsFiddle