javascript - Javascript 慢慢“刷新”DOM 树

Question

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

1. 创建一个图像标签并将 .src 添加到其中。
2. 将此图像标签添加到 document.body。
3. 使此图像标签可见（显示：内联）。
4. 获取元素的 .offsetWidth 和 .offsetHeight。
5. 隐藏图像标签（显示：无）；

所有这些都是使用 JS 完成的，并且在我的本地主机上运行得非常好，但是当我将网站上传到我的客户端托管服务提供商时，我感到很惊讶。在第 4 步中，offsetWidth 和 .offsetHeight 为 0。为什么会这样？我认为在第 3 步之后第 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);

jsFiddle