元素寬度正好<code></body></code></p> <pre><code><script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var diff = $('div.canvas img.photo').get(1).width; console.log(diff); }); </script> </code></pre> <p>之前對文件準備

Question

我試圖獲得使用下面的代碼元件寬度不確定的，但它會記錄不確定。但是，如果我直接在Chrome/Firebug控制檯中運行$('div.canvas img.photo').get(1).width，它將返回正確的寬度。圖像沒有被加載Javascript，所以應該在文檔準備好時觸發。我究竟做錯了什麼？

Answer 1

不，不應該。 document.ready在所有的HTML被加載時觸發，但不是圖像。如果您想等到所有圖像加載完畢，請使用window.load。

例子：

$(window).load(function(){ 
    var diff = $('div.canvas img.photo').get(1).width; 
    console.log(diff); 
}); 

而且，像有些人所指出的那樣，你試圖獲取財產「.WIDTH」兩次。

如果可能，請在CSS中設置圖片標籤的寬度。這樣，您可以安全地使用document.ready作爲代碼。使用window.load自然會延遲腳本的執行，可能是十秒，取決於客戶端連接的速度以及頁面上的內容量。如果您正在執行任何樣式，這可能會導致不必要的跳轉和抖動。

Answer 2

img未被加載到DOM就緒。 docs：

雖然JavaScript提供了當一個頁面渲染執行代碼的加載事件，不會被觸發此事件，直到如圖像的所有資產已被完全接收。在大多數情況下，腳本可以在DOM層次結構完全構建後立即運行。傳遞給.ready（）的處理程序保證在DOM準備就緒後執行，因此這通常是附加所有其他事件處理程序並運行其他jQuery代碼的最佳位置。在使用依賴CSS樣式屬性值的腳本時，在引用腳本之前引用外部樣式表或嵌入樣式元素很重要。

改成這樣：

$(window).load(function(){ 
      var diff = $('div.canvas img.photo').get(1).width; 
      console.log(diff.width); 
     }); 

Answer 3

的問題是，當你試圖獲取其dimentions您的圖像尚未加載。爲了使其工作包裝到$(window).load。或者另一種選擇。如果您知道圖像的大小，您可以提供width和height屬性，那麼它甚至可以在DOMContentLoaded內部工作。有時候這是可取的，因爲onload事件需要更長時間才能觸發'DOMContentLoaded'。 否則您需要使用$(window).load，請參閱@Andreas Carlbom的答案。

Answer 4

圖像的寬度只有在其完全加載後纔可用。 jQuery也支持每個圖像上的onload事件。

可以使用，

$('div.canvas img.photo').load(function(){ 
    // here the image (or all images which match selector) has been loaded. 
}