加载完成前设置 div 不可见后，图像宽度和高度为 0答案

【问题标题】：Image Width and Height is 0 after setting div unvisible before load has finished加载完成前设置 div 不可见后，图像宽度和高度为 0
【发布时间】：2014-09-24 22:49:18
【问题描述】：

我在我的网站上加载了很多图片，如果我有耐心，它可以正常工作。但有时我在图像加载过程中使用myDiv.style.display = 'none'; 触发一个动作，然后图像的宽度=高度=0，因为所有图像都没有完成。当我让我的 div 再次可见时，我看不到它们，但通过搜索 width=height=0 来识别它们。

如果我将宽度和高度设置为大于 0 的值，我会看到图像，但这样会丢失实际大小。我还尝试通过添加 myImage.src += "?t=random"; 之类的内容来更改 image.src。这样做，myImage.onload 函数再次被触发，但宽度和高度仍然为 0。

如何获取图片的实际尺寸或如何强制重新加载？

【问题讨论】：

听起来你的 myImage.src 没有被执行，结果你有一个空的图像标签。运行时是否遇到任何错误？

标签： javascript html image reload interruption

【解决方案1】：

您可以将事件附加到图像元素：

image.onload = function () { /* Your code here */ };

这将在图像实际加载时触发。

确保在设置 src 元素之前附加此事件，并确保您的 src 确实有效。您可以在 Google Chrome 的网络面板中检查这一点（Windows 上的 F12）。

【讨论】：

你能在 jsfiddle 或一小部分代码中重现问题吗？
关键点是，要重现它，我必须触发一个函数，在图像加载完成之前将 div 设置为不可见。如果我等到每张图片都加载完毕，一切正常。

【解决方案2】：

深入了解我发现以下解决方法。

第一次加载图像时，它具有有效的宽度和高度，但由于 div 不可见，因此无法绘制。当我使 div 再次可见并通过更改图像 URL（如 myImage.src+="?t=random"）来启动重新加载时，image.onload 会以图像宽度和高度为 0 被触发。所以我能做的就是保存原始值并使用它们如果需要。

// save or reload image size in case of load interruption if (typeof this.orgWidth == 'undefined' && this.width>0) this.orgWidth = this.width; if (typeof this.orgHeight == 'undefined' && this.height>0) this.orgHeight = this.height; if (this.width==0) this.width=this.orgWidth; if (this.height==0) this.height=this.orgHeight;

【讨论】：