jquery - 为什么这个图像/图像元素大小为 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);

});