为什么这个图像/图像元素大小为0px？

Question

我有这个图片标记：

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

});

有谁看到我的错误是什么？感谢。

Answer 1

在构建DOM但在加载所有资源之前（例如图像），会激活

$(document).ready。您必须使用window.load事件。

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

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

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

});