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がないことに注意してください。問題：私が明らかな何かを見逃しているのは、ちょうど金曜日で休日に近いですか？オンロードからのアラートはすべて同じ値を報告しますが、ホバーに関連付けられている場合は同じ機能が幅を正確に報告します。

しかし、これが最初の画像読み込み時に実行されると、アラートボックスは次のようになります（画像が読み込まれる順序はまだ制御されておらず、ブラウザ次第であるため、これは実際には偽造された順序です-しかし、これは私の問題を十分に示しています）：

"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まで変化するため、これは非常にばかげています。何が得られますか？

4

1 に答える 1

0

あなたのコードはmozillafirefoxとIE6でうまく機能しています

<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番目が表示されます。

問題は見つかりませんでした。画像の幅が異なるかどうかを確認してください。

于 2012-12-15T00:40:04.067 に答える