jquery - 为什么此图像/图像元素大小为0px？

我有这个图像标签：

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

我正在尝试获取图像的宽度，以便可以在其旁边放置文本。当我执行以下功能时，我得到的sidebarWidth为0px：

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

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

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

});

有人看到我的错误了吗？谢谢。

最佳答案

$(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);

});