爲什麼這個圖像/圖像元素大小爲0px？

Question

我有這個圖片標籤：

<img id="sidebar" src="images/homepageSidebar.jpeg" style="max-height:800px; float:left; padding-left:10px;"/> 

我試圖讓圖像寬度，使我可以將文本旁邊。當我做以下功能時，我得到一個邊框寬度爲0px：

$(document).ready(function(){ 
    var sidebarWidth = $('#sidebar').width(), 
     introPosition = sidebarWidth + 10; 

    $('#intro').css({ left:introPosition }); 

    console.log(sidebarWidth); 
    console.log(introPosition); 

}); 

有沒有人看到我的錯誤是什麼？謝謝。

Answer 1

$(document).ready在構建DOM時但在加載所有資源（如圖像）之前觸發。您必須使用window.load事件。

$(window).on('load', function(){ 
    var sidebarWidth = $('#sidebar').width(), 
     introPosition = sidebarWidth + 10; 

    $('#intro').css({ left:introPosition }); 

    console.log(sidebarWidth); 
    console.log(introPosition); 

});