javascript - 一系列不同的图像报告相同的宽度

Question

JS:

function imgLoader(imgObj)
         {
          alert(imgObj.id + " : " + imgObj.src + " : " +imgObj.width);
        }

html :

<img id="img_1" src="image_1.png" onload="imgLoader(this)" />
<img id="img_2" src="image_2.png" onload="imgLoader(this)" />
<img id="img_3" src="image_3.png" onload="imgLoader(this)" />
<img id="img_4" src="image_4.png" onload="imgLoader(this)" />
<img id="img_5" src="image_5.png" onload="imgLoader(this)" />

相关 css(更新 bc of css 评论/问题)

img {position:relative; height: 46px; display: inline-block; cursor:pointer; margin: 0px 10px 0px 0px; padding: 0px 10px 0px 10px;}

注意没有其他的CSS。问题:是不是就在星期五和临近假期时我遗漏了一些明显的东西？来自 onload 的警报都报告相同的值，但是当绑定(bind)到悬停时具有相同的功能 - 准确报告宽度。

但是当它在初始图像加载时运行时，我的警告框看起来像(这实际上是一个伪造的顺序，因为图像加载的顺序尚未受控并且取决于浏览器 - 但是这很好地说明了我的问题):

“img_1:image_1.png:125”

“img_2:image_2.png:125”

“img_3:image_3.png:125”

“img_4:image_4.png:125”

“img_5:image_5.png:125”

这非常愚蠢，因为图像的宽度从 15 像素到 400 像素不等。是什么赋予了？

Answer 1

您的代码在 mozilla firefox 和 IE 6 上运行良好

<script type="text/javascript">
<!--
function imgLoader(imgObj)
         {
          alert(imgObj.id + " : " + imgObj.src + " : " +imgObj.width);
        }
-->
</script>


<img id="img_1" src="image_1.png" onload="imgLoader(this)" />
<img id="img_2" src="image_2.png" onload="imgLoader(this)" />
<img id="img_3" src="image_3.png" onload="imgLoader(this)" />
<img id="img_4" src="image_4.png" onload="imgLoader(this)" />
<img id="img_5" src="image_5.png" onload="imgLoader(this)" />

不同的宽度显示在 5 个警告框上。在 firefox 中它很快，5 个警告框在点击之前一个接一个地快速显示。所以当所有警告框都显示时，第 5 个警告框位于顶部。然后在点击 4th 之后出现在那个下面。

没有发现任何问题。检查您的图片是否宽度不同。