<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var h = $("#im").height();
alert("Hello from ready. Height is " + h);
});
$(window).on("load", function(){
var h = $("#im").height();
alert("Hello from load. Height is " + h);
});
</script>
</head>
<body>
<p class="" id="msg"></p>
<p class="" id="msg2"></p>
<img id="im" src="flower.jpg" alt="">
</body>
</html>
1）以上是我的代码。当我在Chrome 64（64位）中运行它时。 window.load部分在document.ready之前执行。
2）其次，基于我在这些论坛和网上其他地方阅读的内容，我不应该从document.ready获得图像高度，但是，它可以工作，我从这两个函数获得相同的高度。
为什么会这样？
jQuery的ready事件首先由其Deferred实现处理，该实现在内部使用setTimeout（可能允许$.holdReady运行）。它基本上是这样的：
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
// Your `ready` callback
}, 0);
});
如果页面足够简单，使用setTimeout(..., 0)可以延迟回调的执行，以允许load事件首先运行其回调。我在Chrome 64.0.3282.186上测试了它，jQuery ready事件在load之前只有大约10％的时间被触发。
如果您直接使用document.addEventListener，您的代码将按预期工作。
加载窗口后获取图像信息或将eventListener添加到图像。
$(window).on('load', function() {/*Do Stuff*/}
要么
$('#image').on('load', function() {/*Do Stuff*/}
以下是Codepen问题的解决方案。
是的，当文档准备就绪时，只加载结构，而是加载窗口，包括图像等在内的所有组件都已准备好并加载。
希望这可以帮助。