系列不同的圖像的報告相同的寬度

的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像素的寬度。是什麼賦予了？

來源

2012-12-15 Brandt Solovij

jQuery是一個posibillity？ – yckart

它不應該是必要的。最終，jquery被引入使用延遲和承諾使用，但後來纔出現。做了一些代碼提升，我碰到了這個有趣的情況。我寧願將jquery從這裏除去，因爲jquery依賴於與vanilla JS相同的對象和操作。 –

CSS設置爲「125px」？試試[這個演示]（http://jsfiddle.net/VMVQS/），然後取消註釋CSS並查看其差異。 *（打開您的控制檯。）* –

您的代碼上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個警報框在點擊前一個接一個地顯示出來，所以當顯示所有警報框時，第五個警報框在頂部。然後點擊第四個出現在那之下。

沒有發現任何問題。檢查你的圖像，如果這些是在不同的寬度或不。

來源

2012-12-15 00:40:04 user1844626

告訴OP它適用於你並沒有回答爲什麼它不爲他工作的問題。 –

我很欣賞額外的眼睛和耳朵，但遺憾的是這不是一個解決方案哼 –

仔細閱讀我的答案。最後提出了一個建議。 – user1844626

系列不同的圖像的報告相同的寬度

回答

相關問題