jquery - 为什么此图像/图像元素大小为 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

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

});