Javascript 慢 "flush"DOM 树

Question

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

1. 创建一个图像标签并向其添加 .src。
2. 将此图片标签添加到 document.body。
3. 使此图片标签可见(显示:内联)。
4. 获取元素的 .offsetWidth 和 .offsetHeight。
5. 隐藏图片标签(display:none);

所有这些都是使用 JS 完成的，并且在我的本地主机上都运行良好，但是当我将网站上传到我的客户托管服务提供商时，我感到很惊讶。 offsetWidth 和 .offsetHeight 在第 4 步中为 0。为什么会这样？我认为我需要在第 3 步之后和第 4 步之前进行某种“冲洗”，但我不确定。有什么建议 ？谢谢。

Answer 1

您必须等待图像通过网络实际加载。您也不需要将事物添加到 DOM:

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

在这里，“handleImageSize”将是您编写的一个函数，用于执行您需要对图像尺寸执行的任何操作。