图像高度始终返回为 0答案

【问题标题】：Image height always returned as 0图像高度始终返回为 0
【发布时间】：2013-08-12 12:14:03
【问题描述】：

我正在尝试关注this SO 关于如何为图像着色的答案，但是当我这样做时，$("#myselector").height(); 一直返回为 0。我做错了什么？这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

<script>
$(document).ready(function() {
  overlay = $("#overlay");
img = $("#myimg");
overlay.width($("#myimg").width());
alert($("#myimg").height());
overlay.height("100");
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");

});


</script>

<body id="home">

<div id="overlay" class="overlay"></div>
<img id="myimg" src="building.png" />

</body>
</html>

【问题讨论】：

在你的源码上，他使用了 overlay.height(img.css("height"));

标签： javascript jquery

【解决方案1】：

我最好的猜测是图像尚未加载。

您的脚本运行onready。如果您将其更改为onload，您可能会得到更好的结果。

改变

$(document).ready(function() {

到

$(window).load(function() {

更多：window.onload vs $(document).ready()

【讨论】：

【解决方案2】：

使用图片'load事件：

$(document).ready(function() {
  overlay = $("#overlay");
  img = $("#myimg");
  img.load( function(){
    overlay.width($("#myimg").width());
    alert($("#myimg").height());
    overlay.height("100");
    overlay.css("top", img.offset().top + "px");
    overlay.css("left", img.offset().left + "px");
  });
});

【讨论】：

你是一个美丽的人。谢谢！

【解决方案3】：

替换：

$(document).ready(function() {

开：

$(window).load(function() {

【讨论】：

在这样的答案中，解释更改的影响很重要。为什么你认为$(window).load在这种情况下优于$(document).ready？