2014-03-01 30 views
0

我是初學者,我試圖顯示圖像的寬度。當我第一次加載它給出正確的寬度,如果我重新加載它顯示寬度爲0.再次當我嘗試加載與鉻選項「空緩存和硬重新加載」它顯示正確的寬度。請揭開神祕面紗,我無法理解。當我試圖重新加載時顯示圖像長度爲零

<html> 
<head> 
    <style type="text/css"> 
#latest_albums{ 

overflow: hidden; 
margin: 1em 1em; 
background-color: #009999; 
} 

.album li{ 
list-style-type: none; 
float: left; 
overflow: hidden; 
margin: 2px 2px 0px 0px; 
position: relative; 


} 

</style> 

<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 

</head> 
<body> 
    <div id="latest_albums"> 

     <div class="album"> 
      <div class="set1"> 
      <li> <img src="albums/image1.jpg"> </li> 
      <li> <img src="albums/image2.jpg"> </li> 
      <li> <img src="albums/image3.jpg"> </li> 
      <li> <img src="albums/image4.jpg"> </li> 

      <li> <img src="albums/image5.jpg"> </li> 
      <li> <img src="albums/image6.jpg"> </li> 
</div> 
<div class="set2"> 
      <li> <img src="albums/image1.jpg"> </li> 
      <li> <img src="albums/image2.jpg"> </li> 
      <li> <img src="albums/image3.jpg"> </li> 
      <li> <img src="albums/image4.jpg"> </li> 

      <li> <img src="albums/image5.jpg"> </li> 
      <li> <img src="albums/image6.jpg"> </li> 
</div> 
     </div> 

    </div> 
    <script type="text/javascript"> 
var i=0,w = -150,SCROOL_WIDTH,WIN_WIDTH,IMG_MARGIN,IMG_WIDTH=10,TOT_ALBUMS,ALBUM_WIDTH; 

IMG_WIDTH = $("div.album li").eq(0).width(); 

console.log(IMG_WIDTH); 
</script> 
</body> 
</html> 

感謝, 拉維

回答

0

你應該等到圖像得到它的寬度之前加載(否則就西港島線返回0,因爲它不知道它的大小)。試試這個:

$("div.album li:first img").load(function(){ 
    IMG_WIDTH = $("div.album li").eq(0).width(); 
    console.log(IMG_WIDTH); 
}); 
0

嘗試這樣的:

<script type="text/javascript"> 
    $(document).ready(function() { 
    var i=0,w = -150,SCROOL_WIDTH,WIN_WIDTH,IMG_MARGIN,IMG_WIDTH=10,TOT_ALBUMS,ALBUM_WIDTH; 

    IMG_WIDTH = $("div.album li").eq(0).width(); 

    console.log(IMG_WIDTH); 
}); 
</script> 

還有事件處理image.onload加載圖像時執行。有時候甚至不會觸發image.onload,因此您可以使用計時器檢查圖像寬度是否超​​過0.請檢查此項:jQuery or Javascript check if image loaded

相關問題