爲什麼當頁面刷新爲chrome時，width的值被設置爲零？

我寫了一些jQuery代碼，我在屏幕上獲取圖像的寬度並將它們存儲在一個變量中。然後我在控制檯中記錄了該變量以查看它的值。當頁面第一次加載時，它顯示正確的值，但是如果我按下F5，它將顯示0作爲寬度。爲什麼當頁面刷新爲chrome時，width的值被設置爲零？

這裏的HTML：

<body> 
     <img src="img1.jpg" alt="image"> 
     <img src="img1.jpg" alt="image"> 
     <script type="text/javascript" src="script.js"></script> 
    </body>

這裏是jQuery代碼（的script.js）：

jQuery(document).ready(function($) { 
     var imgs = $('img'); 
     var width = imgs[0].width; 
     console.log(width); 
    });

控制檯顯示600當頁面加載的第一次，但是當我按F5它顯示0。這是爲什麼？

來源

2012-03-13 Jatin

在jQuery(document).ready()時間，不能保證圖像加載。必須加載圖像才能獲得寬度。圖像異步加載，可能會在jQuery(document).ready()火災後完成。

要確定圖像已加載，您需要爲該特定圖像設置一個onload處理程序，以便您可以知道它何時特別加載，或者只需檢查圖像寬度即可。頁面加載了window.onload或jQuery $(window).load(fn)。

做將更改您的代碼最簡單的東西：個人

jQuery(window).load(function() { 
    var imgs = jQuery('img'); 
    var width = imgs[0].width; 
    console.log(width); 
});

，我會建議你使用jQuery的.height()和.width()方法是這樣的：

jQuery(window).load(function() { 
    var imgs = jQuery('img'); 
    var width = imgs.eq(0).width(); 
    console.log(width); 
});

你可以看到這一個工作在這裏：http://jsfiddle.net/jfriend00/D4CyN/

來源

2012-03-13 16:39:54 jfriend00

這樣做會在第2行顯示這個錯誤：'Uncaught TypeError：object is not a function' on line 2：'var imgs = $（'img'）;' – Jatin 2012-03-13 16:50:58

好的，顯然是分配'$'與document.ready不適用於window.load。我已經從代碼中刪除了它。 – jfriend00 2012-03-13 16:52:37

和document.ready它在Firefox中正常工作。 – Jatin 2012-03-13 16:52:52

如果你知道圖像尺寸，把它們放在標記：

<img src="img1.jpg" width="600" height="…">

那麼你永遠不會得到0寬度。：D

來源

2014-01-20 01:08:47 sam

爲什麼當頁面刷新爲chrome時，width的值被設置爲零？

回答

相關問題