文檔就緒時元素寬度未定義

Question

我試圖在</body>之前使用以下代碼獲取元素寬度

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        var diff = $('div.canvas img.photo').get(1).width;
        console.log(diff);
    });
</script> 

但它記錄未定義。 但是，如果我直接在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中的imagetags上設置寬度。 這樣，您就可以安全地將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

圖像的寬度僅在完全加載時才可用。 jQuery也支持每個圖像上的onload事件。

您可以使用，

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

Answer 4

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