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（更新的css评论/问题的bc）

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

注意没有其他的CSS。问题：是否只是星期五，接近假期我错过了一些明显的东西？来自onload all的警报报告相同的值，但是当与悬停相关联时，相同的功能 - 准确报告宽度。

但是当它在初始图像加载时运行时，我的警告框看起来像（这实际上是一个伪造的订单，因为加载图像的顺序尚未控制并且由浏览器决定 - 但是这足以说明我的问题）：

“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”

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

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个警报框位于顶部。然后在点击之后第4个出现在那之下。

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

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

1 个答案: