2

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 的警报都报告相同的值，但是与悬停相关的相同功能 - 准确报告宽度。

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

“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 像素不等。是什么赋予了？

4

1 回答 1

0

您的代码在 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个警报框在顶部。然后点击后，第四个出现在那个下面。

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

于 2012-12-15T00:40:04.067 回答