图像加载时的javascript边缘引用在Chrome中不起作用

我有一个画廊，它用javascript调整图像的大小，以保持原始的纵横比。 关于文档结构：考虑此特定对象的样式表如下所示：

 #ThePicture {position:absolute;left:50%;height:100%;max-width:100%;}

然后PHP为菜单构建图像列表，最近的一个设置为

#图片

这是由以下javascript操作的

 function KeepRatio() {
 var height = document.getElementById('ThePicture').height;
 var width = document.getElementById('ThePicture').width;
 var origHeight = document.getElementById('ThePicture').naturalHeight;
 var origWidth = document.getElementById('ThePicture').naturalWidth;
 var ratio = origWidth / origHeight;
 document.getElementById('ThePicture').width = height * ratio;
 document.getElementById('ThePicture').style.marginLeft = - width/2;
 }

我在

window.onload

的实例中调用此函数一次，然后在选择要查看的新图像的每个实例中调用此函数，从而打开

…图片”）。onload

---

现在，我的问题只出现在Chrome上：首先，没有任何图像被设置为图片（这几乎可以肯定是由Javascript函数生成的，因为初始图像是在PHP构建整个页面后生成的。），在第一次点击菜单选择新图像时，什么也没有发生，第二次单击时，图像将显示在其预期位置之外，第三次单击时，负边距将被计算出来，并将图像移动到原来的位置。我的页面在Opera和Mozilla中运行良好。

请发布一个提琴。顺便问一下，您是否使用一个id“ThePicture”处理所有图像？虽然fiddle没有复制完全相同的错误，但我的网站的实际链接不是更合适吗？是的，fiddle没有复制错误……请尝试注释窗口。Onload=KeepRatio（）；我实际上认为问题在于获取自然高度/自然宽度，因为一旦图像缓存，bug就不再存在了